ggt87125 2009-03-21 21:58
浏览 234
已采纳

ext 界面问题

看图，我想根据左边的表格记录，更改红色的部分为 ComboBox ，TextField，或者 DateField ， 有什么好的方法 ？

  • 写回答

3条回答 默认 最新

  • zhoujuan520 2009-03-22 11:36
    关注

    [color=red]帮你做出来了.或下面测试通过,原理就这样了[/color]

    [code="html"]
    <%@ page language="java" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    网络狗盘






    <br> /*<br> * Ext JS Library 2.2.1<br> * Copyright(c) 2006-2009, Ext JS, LLC.<br> * <a href="mailto:licensing@extjs.com">licensing@extjs.com</a><br> * <br> * <a href="http://extjs.com/license">http://extjs.com/license</a><br> */</p> <pre><code> Ext.onReady(function(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = &#39;side&#39;; var bd = Ext.getBody(); // Define the Grid data and create the Grid var myData = [ [&#39;3m Co&#39;,71.72,0.02,0.03,&#39;9/1 12:00am&#39;], [&#39;Alcoa Inc&#39;,29.01,0.42,1.47,&#39;9/1 12:00am&#39;], [&#39;Altria Group Inc&#39;,83.81,0.28,0.34,&#39;9/1 12:00am&#39;], ]; var ds = new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [ {name: &#39;company&#39;}, {name: &#39;price&#39;, type: &#39;float&#39;}, {name: &#39;change&#39;, type: &#39;float&#39;}, {name: &#39;pctChange&#39;, type: &#39;float&#39;}, {name: &#39;lastChange&#39;, type: &#39;date&#39;, dateFormat: &#39;n/j h:ia&#39;} ]) }); ds.loadData(myData); // example of custom renderer function function italic(value){ return &#39;&#39; + value + &#39;&#39;; } // example of custom renderer function function change(val){ if(val &gt; 0){ return &#39;&#39; + val + &#39;&#39;; }else if(val &lt; 0){ return &#39;&#39; + val + &#39;&#39;; } return val; } // example of custom renderer function function pctChange(val){ if(val &gt; 0){ return &#39;&#39; + val + &#39;%&#39;; }else if(val &lt; 0){ return &#39;&#39; + val + &#39;%&#39;; } return val; } // the DefaultColumnModel expects this blob to define columns. It can be extended to provide // custom or reusable ColumnModels var colModel = new Ext.grid.ColumnModel([ {id:&#39;company&#39;,header: &quot;Company&quot;, width: 160, sortable: true, locked:false, dataIndex: &#39;company&#39;}, {header: &quot;Price&quot;, width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: &#39;price&#39;}, {header: &quot;Change&quot;, width: 75, sortable: true, renderer: change, dataIndex: &#39;change&#39;}, {header: &quot;% Change&quot;, width: 75, sortable: true, renderer: pctChange, dataIndex: &#39;pctChange&#39;}, {header: &quot;Last Updated&quot;, width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer(&#39;m/d/Y&#39;), dataIndex: &#39;lastChange&#39;} ]); bd.createChild({tag: &#39;h2&#39;, html: &#39;Using a Grid with a Form&#39;}); /* * Here is where we create the Form */ var gridForm = new Ext.FormPanel({ id: &#39;company-form&#39;, frame: true, labelAlign: &#39;left&#39;, title: &#39;Company data&#39;, bodyStyle:&#39;padding:5px&#39;, width: 750, layout: &#39;column&#39;, // Specifies that the items will now be arranged in columns items: [{ columnWidth: 0.6, layout: &#39;fit&#39;, items: { xtype: &#39;grid&#39;, ds: ds, cm: colModel, sm: new Ext.grid.RowSelectionModel({ singleSelect: true, listeners: { rowselect: function(sm, row, rec) { switch(row){ case 0: Ext.getCmp(&#39;combo&#39;).show(); Ext.getCmp(&#39;text&#39;).hide(); Ext.getCmp(&#39;date&#39;).hide(); break; case 1: Ext.getCmp(&#39;combo&#39;).hide(); Ext.getCmp(&#39;text&#39;).show(); Ext.getCmp(&#39;date&#39;).hide(); break; case 2: Ext.getCmp(&#39;combo&#39;).hide(); Ext.getCmp(&#39;text&#39;).hide(); Ext.getCmp(&#39;date&#39;).show(); break; } Ext.getCmp(&quot;company-form&quot;).getForm().loadRecord(rec); } } }), autoExpandColumn: &#39;company&#39;, height: 350, title:&#39;Company Data&#39;, border: true, listeners: { render: function(g) { g.getSelectionModel().selectRow(0); }, delay: 10 // Allow rows to be rendered. } } },{ columnWidth: 0.4, xtype: &#39;fieldset&#39;, labelWidth: 90, title:&#39;Company details&#39;, defaults: {width: 140}, // Default config options for child items defaultType: &#39;textfield&#39;, autoHeight: true, bodyStyle: Ext.isIE ? &#39;padding:0 0 5px 15px;&#39; : &#39;padding:10px 15px;&#39;, border: false, style: { &quot;margin-left&quot;: &quot;10px&quot;, // when you add custom margin in IE 6... &quot;margin-right&quot;: Ext.isIE6 ? (Ext.isStrict ? &quot;-10px&quot; : &quot;-13px&quot;) : &quot;0&quot; // you have to adjust for it somewhere else }, items: [{ xtype:&#39;panel&#39;, fieldLabel : &#39;哈哈&#39;, isFormField: true, items:[{ id:&#39;combo&#39;, value:&#39;ComboBox&#39;, xtype:&#39;combo&#39; },{ hidden:true, xtype:&#39;textfield&#39;, value:&#39;TextField&#39;, id:&#39;text&#39; },{ hidden:true, id:&#39;date&#39;, value:&#39;1985-05-01&#39;, xtype:&#39;datefield&#39; } ] }] }], renderTo: bd }); // Create Panel view code. Ignore. }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; </code></pre> <p></html></p> <p>[/code]</p>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • dataview 布局问题 javascript
    2009-09-02 14:00
    回答 2 已采纳 有这个可能.但是你还是得定位到是谁溢出了. 你的panel嵌套太多了,没必要
  • 如何通过ext展示blob字段内容？ javascript
    2009-01-14 16:56
    回答 6 已采纳 了解楼主的意思了 请参考 http://itren.iteye.com/blog/255562
  • python web前端如何实现网格视图遍历数据库，可以给个大概前端代码吗？ flask mysql python 有问必答
    2021-06-04 13:34
    回答 3 已采纳 您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~ 如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
  • java前端开发ext_前端框架：ExtJS
    2021-03-13 10:38
    达拉崩吧叭叭叭的博客 一、理解要学习及应用好Ext框架，...Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。无论组件有多少配置属性、还是事件、方法等等，其最终都会转...
  • 关于Extjs中FieldSet中的单元格合并的问题 javascript
    2010-09-20 10:36
    回答 3 已采纳 var fieldSet2 = new Ext.form.FieldSet({ title : '基本信息', // width:400, height : 260, colu
  • Ajax的请求在struts2中怎么实现跳转 javascript
    2010-05-13 18:23
    回答 8 已采纳 由于你的请求都是采用Ajax的, 所以每次发起ajax请求, 虽然拦截器判断出未登录跳转到登录页面, 那么, [b]这次ajax请求的结果就是这个页面(具体的说, 这次请求返回的就是登录页面的源代码)
  • 如何显示保存在oracle数据库中的图片 javascript
    2009-11-25 10:24
    回答 2 已采纳 首先是以何种形式保存的，如果是链接的话就简单了，直接链接到相应地址， 如是Blob的话，那么就用模板输出二进制文件，并设置文件头，应该也可以。
  • 前端框架Ext学习之框架搭建
    2017-08-02 10:12
    DDLoveWord的博客 不够用啊，这不为了项目，领导发话不能只来后台啊，把前端也弄一下。为了快，就直接弄框架把。一句话ExtJS就这样进入了我的生活，带给我那就无尽的烦恼啊，埋头苦学，记录下学习进程。 既然要学习这个Ext的框架了，...
  • gridPanel 添加事件 javascript
    2011-05-09 09:54
    回答 3 已采纳 写了一个demo 看一下吧 Ext.onReady(function(){ var data = []; var store = new Ext.data.Store({ prox
  • 页面如何展现两个或多个表格？ javascript
    2009-09-07 13:46
    回答 3 已采纳 把表格grid放在panel里。。进行border布局行不行。。。 分别指定 north center south
  • GridPanel分页不成功，读取java后台数据 javascript
    2010-07-29 10:39
    回答 1 已采纳 应该是你后台回的数据的问题，比如你收到前台发送的要第一到第五条的请求，但是还是返回了所有的数据，那么前台就会将你返回的数据全部显示了
  • 前端组件ext-4.2.1-gpl.zip
    2018-04-04 16:59
    ext安装包,解压自行安装哟.它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。
  • 一个按键的响应 javascript
    2009-05-24 04:54
    回答 1 已采纳 首先说一下从上面代码中看出来的2个问题吧 1.竟然使用了extjs.就没有必要自己去写XMLHttpRequest请求了.你可以参考一下Ext.Ajax.request();的api文档 2.如果
  • ext-6.0.0-gpl
    2020-05-10 15:40
    ExtJs6.0版本，ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
  • Ext4.1.0中文API离线版
    2019-07-22 20:06
    资源名称：Ext4.1.0 中文API离线版内容简介：ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架Ext JS具有115多种高性能，预测试和集成的UI组件，包括日历，网格，图表等。Ext JS Grid...
  • ExtJS前端框架EXT弹出窗口事件
    2017-06-14 15:54
    花样的尘埃的博客 Ext.MessageBox.alert() Ext.MessageBox.alert()提供一个OK按钮。对应JavaScript中的alert()。 定义：alert( Stringtitle,Stringmsg,[Function fn], [Object scope] ) :Ext.MessageBox 该函数有4个...
  • Ext中的Excel导入界面
    2011-11-21 11:38
    提供在java中使用前端Ext导入Excel文件的使用，包括前端导入Excel文件的窗口js设置，以及后台接收Excel文件的处理等内容，本代码可直接修改使用，非常方便
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条