Ext.create('Ext.grid.Panel', { //使用Paging Scroller分页插件 verticalScroller: 'paginggridscroller', // do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false, // infinite scrolling does not support selection disableSelection: true, // ... });
4 Grid Panel添加Checkbox
只要设置Grid Panel的selModel属性为Ext.selection.CheckboxModel，点击这里查看官方代码实例。
Ext.create('Ext.grid.Panel', { selModel: Ext.create('Ext.selection.CheckboxModel'), //设置Grid Panel的选择模式为Checkbox store: userStore, columns: ... });
5 综合示例
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="https://www.jb51.net/images/user_suit.png">':'<img src="https://www.jb51.net/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(); //获取选择行的数据
(1)获取数据 :
单行
id = record.get('id');
或者
id = record.data.id;
多行
record[i].get('ddd')
(2)删除数据 :
var obj = grid.getSelectionModel().getSelected(); store.remove(obj); grid.getView().refresh();
(3)查询
store.baseParams['memid'] = fb.form.findField('memid').getValue(); store.baseParams['start'] = 0; store.load();
(4)添加一行列 :
Ext自己带的一个插件
需要文件 RowExpander.js
var expand = new Ext.ux.grid.RowExpander({ tpl : new Ext.Template( '<p>{address}</p>' ) });
在grid的columns中加 expand，
并在grid属性中加 plugins: expand
您可能感兴趣的文章: