//列模型 var cm = new Ext.grid.ColumnModel([ {header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"}, {header: "性别", width: 40, dataIndex: "Sex", align: "center"}, {header: "生日", width: 150, format: "Y-m-d", dataIndex: "Birthday"}, {header: "学历", width: 80, dataIndex: "Education", align: "center"}, {id: "memo", header: "备注", dataIndex: "Memo"} ]); 在上述代码中,我们看到,每一列的信息都被封装在json对象中,并且组成一个数组传送到Ext.grid.ColumnModel。其中 ,dataIndex属性最需要注意,表示记录结构中的name属性值。 我们必须创建DataProxy、DataReader和Store对象,Store对象和GridPanel绑定,GridPanel就会显示Store中的数据了 我们采用json格式来提供测试数据 * * 显示序号 * 通过序号我们一眼就能看到当前表格的行数。Extjs为此专门写了一个叫Ext.grid.RowNumberer的类,该类通过prototype * 添加了一个json类型的属性,其内容和列模型中的配置如出一辙,可以参考源码 * 从代码中看出,这是一个特殊的列,没有列头说明性文字,宽度为23像素且被固定,不能排序,也没有菜单。这就是 * RowNumberer * * 自定义显示的内容 * 列模型中提供了一个回调函数renderer,该函数可以根据当前列的信息进行再加工,函数定义如下: * renderer: function(value, metadata, record, rowIndex, colIndex, store){ * } * 参数说明: * value:原始值 * metadata: 可能的值为css或attr * record:Ext.data.Record, GridPanel的记录结构定义 * rowIndex: 行索引 * colIndex: 列索引 * store: Ext.data.Store 数据源 * * 我们将性别变成对应的图标 * 修改原有的列模型 */
发表评论
-
ext_GridPanel2_6
2011-08-26 16:31 906var grid = new Ext.grid.GridPa ... -
ext_GridPanel2_5
2011-08-26 16:29 869//准备数据 var data = [ { ... -
ext_GridPanel2_4
2011-08-26 16:27 1401/** * grid.getView().getRows( ... -
ext_GridPanel2_3
2011-08-26 16:25 801//Proxy var proxy = new Ext. ... -
ext_GridPanel2_2
2011-08-26 16:21 850* selectRows(rows, keepExisti ... -
ext_GridPanel2_1
2011-08-26 16:18 916Ext.namespace("com.deng&qu ... -
ext_GridPanel1_4
2011-08-25 18:01 913//Record 定义记录结果 var Human = ... -
ext_GridPanel1_3
2011-08-25 17:59 873Ext.onReady(function(){ //列模型 ... -
ext_GridPanel1_1
2011-08-25 11:08 1075Ext.namespace("com.deng&qu ... -
Ext学习_FormPanel布局3
2011-08-01 10:15 1008{ //行3 layout: " ... -
Ext学习_FormPanel布局2
2011-08-01 10:14 1111Ext.onReady(function(){ var f ... -
Ext学习_FormPanel布局1
2011-08-01 10:12 979Ext.namespace("com.deng&qu ... -
悬停提示与验证4
2011-07-27 15:47 897/** * vtype验证 * vtype验证是一种预 ... -
悬停提示与验证3
2011-07-27 15:46 916/** * 三 表单组件验证 * 表单组件自身有验证功 ... -
悬停提示与验证2
2011-07-27 15:45 1236/** * 有时候,悬停提示信息过长,我们愿意换行显示,对 ... -
悬停提示与验证1
2011-07-27 15:42 1173Ext.namespace("com.deng&qu ... -
Ext学习_表单组件6
2011-07-19 12:03 996var f = new Ext.form.FormPanel ... -
Ext学习_表单组件5
2011-07-19 12:03 934//最高学历 //准备数据 var data = [ ... -
Ext学习_表单组件4
2011-07-19 12:01 473Ext.namespace("com.deng&qu ... -
Ext学习_表单组件3
2011-07-18 15:47 961/** * 文本区 */ var areaAddre ...
相关推荐
Ext的gridpanel控件二次加载时丢失解决方案
ext.net gridpanel 弹出窗
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
tapestry4.02中封装ext的GridPanel组件
NULL 博文链接:https://wv1124.iteye.com/blog/741559
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
EXT实例GridPanel. 实现简单的。
EXT GridPanel获取某一单元格的值
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
NULL 博文链接:https://shenhaiquan.iteye.com/blog/1474328
NULL 博文链接:https://a729812804.iteye.com/blog/1215795
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
GridPanel和TreePnal功能类似,都是Ext JS中的表格便携利器,相比之下GridPanel还要更强大并且更复杂一些,下面我们就来整理一下JavaScript的Ext JS框架中的GridPanel组件使用指南
Ext grid panel 滚动条位置不变,适用于实时数据的刷新