Ext.grid.GridPanel小结 博客分类: Extjs EXT
程序员文章站
2024-02-03 13:34:22
...
var grid = new Ext.grid.GridPanel({ store //数据源 cm //Ext.grid.columnModel columns //功能和Ext.grid.columnModel一样。与cm有一个就行 autoWidth:true width title border:false columnLines: true, renderTo //显示div标签的id animCollapse:false //True 表示为面板闭合过程附有动画效果 (默认为true,在类 Ext.Fx 可用的情况下). collapsible: true, //true 表示面板可以闭合 columnLines:true, //true 表示有格边框 loadMask:true //获取数据里时有等待界面 stripeRows: true, //双色表格 plugins:true, bbar:new Ext.PagingToolbar({ pageSize:10, store:store, //数据源 displayInfo:true, //为true时下面的才显示 displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg:'没有记录' }), tbar:[{ text:'查询', icon:'/trade/images/delete.gif', cls:'x-btn-text-icon', handler:function(){win.show();} } }) //********************************************** //PagingToolbar分页 //传到服务器数据 start开始查询位置, limit要查询多少条 //排序 //服务器 sort,dir //********************************************** var com = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "客户ID", width: 50, sortable: true, dataIndex: 'memid'}, {header: "客户姓名", width: 75, sortable: true, dataIndex: 'memName'}, {header:'姓别', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} {header: '跟踪号',width:150,dataIndex:'code'}, {header: '日期', width:150, dataIndex: 'kd_time'} ]); /*********************************************** grid tbar 样式 cls:'x-btn-text-icon' 添加 **************************************************/ EditorGridPanel chickToEdit:1 //点击次数 ColumnModel 中要加editor editor:new Ext.form.TextField({ }) //获取修改后的数据 var storeEdit = grid.getStore(); // var modified = storeEdit.modified.slice(0); // Ext.each(modified,function(m){ alert(m.data.id); //数据就在m.data中 id 为字段名 }) //////////////////////////////////////////////////////////////////////////////////////// //获取grid数据 var selModel = grid.getSelectionModel(); 获取选择模式 var record; if(!selModel.hasSelection()){ Ext.Msg.alert('警告','请选择要修改的行!'); return; } selModel.getSelections().length; //选择的行数 record = selModel.getSelected(); //获取选择行的数据 获取数据 单行 id = record.get('id'); 或者 id = record.data.id; 多行 record[i].get('ddd') 删除数据 var obj = grid.getSelectionModel().getSelected(); store.remove(obj); grid.getView().refresh(); ////////////////////////////////////////// 查询 store.baseParams['memid'] = fb.form.findField('memid').getValue(); store.baseParams['start'] = 0; store.load(); ///////////////////////////////// 添加一行列 Ext自己带的一个插件 需要文件 RowExpander.js var expand = new Ext.ux.grid.RowExpander({ tpl : new Ext.Template( '<p>{address}</p>' ) }); 在grid的columns中加 expand, 并在grid属性中加 plugins: expand
上一篇: HBase表的基本结构和常用API
下一篇: Vim基础 博客分类: Ubuntu
推荐阅读
-
Ext.grid.GridPanel小结 博客分类: Extjs EXT
-
Ext中经常用到的VTypes的自定义扩展集。 博客分类: Extjs EXT
-
扩展Ext的新手教程,对扩展ExtJs简单地介绍 博客分类: Extjs EXTOO
-
扩展Ext的新手教程,对扩展ExtJs简单地介绍 博客分类: Extjs EXTOO
-
创建自定义的事件,然后透过RelayEvents与其他组件发生联系 博客分类: Extjs EXTPHP编程JavaScriptprototype
-
在Ext中使用事件 博客分类: Extjs EXTJavaScript浏览器编程工作
-
如何透过扩展现有类的能力来创建用户自定义界面的控件 博客分类: Extjs EXTUIprototype配置管理CSS
-
Extjs index.html文件模版 博客分类: Extjs HTMLEXTCSSJavaScript脚本
-
Ext.grid.GridPanel小结
-
ExtJS下 Ext.Direct加载和提交过程排错小结