extjs之GridPanel表格
2013-04-04 10:19
417 查看
grid初级部分: 需要的其他辅助类有ColumnModel(Observable的子类)、RowSeletedModel、GridView、Store、RowNumberer、CheckboxSelectiondModel
(1)、包含表头(列的宽度、是否改变大小、是否排序(sortable)、是否出现菜单,是否隐藏(hidden),渲染(renderer))、数据行、分页栏。
(2)、为autoExpandColumn属性的列必须id属性。
(3)、列模型的dataIndex列需要对应reader中的name属性,reader中的mapping属性对应proxy中的name属性。
(4)、在columnModel中设置列属性renderer:Ext.util.Format.dateRenderer('Y-m-d')可以控制日期的格式
(5)、行选择模型值(grid.getSelectionModel())负责选择行的方法(第一个、最后一个、下一个、上一个、选择指定的、选择全部)和行被选择的信息(是否被选中、取消指定的选择、得到选中的条目、判断是否还有上/下条)
(6)、通过grid.getView().getRows().length可以取得总行数
(7)、通过指定Ext.grid.RowNumberer()添加序号
(8)、通过指定Ext.grid.CheckboxSelectionModel()添加复选框,在Gridpanel中添加sm:sm
(9)、视图模型(GridView)有getRows()、getRow(row)、getCell(row,col)、refresh(true:是否表头也刷新)
(10)、通过grid.getStore().getAt(i).get('name')在模型记录中获得对应的数据内容,另外在Store中定义了add(record),insert(index,records),remove()remove(index),removeAll()
(11)、 grid.getColumnModel().getColumnById('tagline').sortable = true;可以通过列模型设置列是否可排序
同样:var colModel = grid.getColumnModel(); colModel.setHidden(column.getIndexById('tagline'), true)设置列为隐藏
(12)、enableColumnMove:false; 设置列不能拖动
(13)、从xml读取数据的准备有:在store中配置url,reader用XmlReader,XmlReader的第一个参数要用record设置数据行在xml中的根目录,最后用load()方法加载
(14)、从json读取数据和xml差不多,只用把XmlReader变为JsonReader,把record改为root,在json对象中要有一个success属性和root属性的一个对象数组
(15)、为列模型指定:Ext.grid.RowNumberer()配置学号
(16)、为列模型配置和GridPanel配置:Ext.grid.CheckboxSelectionModel()可以配备复选框
(17)、通过grid.getSelectionModel()获取选择模型,有selectFirstRow()、selectLastRow()、selectNext(keeping)、selectPrevious(keeping)、hasNext()、hasPrevious()、selectAll()、isSelected(index)、selectedRows(rows,
keeping)、selectRange(start, end, keeping)、deselectRow(index)、deselectRange(start, end)、getCount()
(18)、通过grid.getView().getRows().length可以获得总行数,GirdView中常用方法有:getRows()、getRow(index)、getCell(row,
col)、refresh(boolean)
(19)、grid.getStore().getAt(i).get('name')获取指定name的行,在store常用的方法有:add(records)、insert(index,records)、remove(record)、removeAll()
(20)、CellSelectionModel:一次选择一个单元格
RowSelectModel:一次选择一行
ColumnSelectionModel:一次选择一列
CheckBoxSelectionModel:使用checkbox来做行的选择
grid高级部分
一、显示摘要
grid有一个隐藏的RowBody,由GridView管理,在grid的viewConfig属性配置中,有属性forceFit(按一定比列拉伸列的宽度)、enableRowBody(启动RowBody)、showPreview(是否显示摘要)、getRowClass()设置RowBody的内容
配置如下:
viewConfig:{
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass:function(record,rowIndex,p,store){
if(this.showPreview){
p.body = '<p style="padding:5px;border:1px #DFE8F6 solid;margin:2px"><span style="color:#15428B;font-weight:bold;">备注:</span>顶替棋不日</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
二、分组
需要GroupingStore(Store的子类)和GroupingView(GridView)的支持,分组的依据是reader的name属性,要进行分组有以下准备:
(1):要配置GroupingStore,
var store = new Ext.data.GroupingStore({
proxy:proxy,
reader:reader,
groupField:'Sex',
autoLoad:true,
sortInfo:{field:'Sex',direction:'DESC'}
});
(2):在GridPanel中指定view:new Ext.grid.GroupingView()
(3):要使得分组和摘要同时显示,必须把先前的viewConfig配置写在view的GroupingView的配置里面
三、可编辑的EditorGridPanel
(1):EditorGridPanel的选择模型是CellSelectionModel,而且列模型要指定一个editor:new Ext.grid.GridEditor(),里面是是一些表单控件。
(2):在EditorGridPanel比以前多autoEncode:true,clickToEdit:1
(3):将记录设置为脏数据状态,并将修改后的记录存放在Record类型的数组modified中。当删除数据时,modified不变化,所以这些操作:删除Store,modified中指定的元素,触发remove事件,更新EditGridPanel视图
(4):可以用CellSelectionModel模型用getSelectedCell()获取单元格信息,返回如[3,4]这的行列坐标;用hasSelection()获取是否有有选中的单元格
(5):EditorGridPanel的验证和表单完全一样
四、paging分页
bbar:new Ext.PagingToolbar({
store:store,
pageSize:2,
displayInfo:true,
displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条',
emptyMsg:'没有记录!',
items:['-',{
icon:'../resources/images/default/dd/drop-yes.gif',
cls:'x-btn-text-icon',
pressed:true,
text:'隐藏备注',
cls:'x-btn-text-icon details',
toggleHandler:function(btn,pressed){
var view = grid.getView();
if(pressed){
btn.setText('隐藏备注');
}else{
btn.setText('显示备注');
}
view.showPreview = pressed;
view.refresh();
}
}]
})
(1)、包含表头(列的宽度、是否改变大小、是否排序(sortable)、是否出现菜单,是否隐藏(hidden),渲染(renderer))、数据行、分页栏。
(2)、为autoExpandColumn属性的列必须id属性。
(3)、列模型的dataIndex列需要对应reader中的name属性,reader中的mapping属性对应proxy中的name属性。
(4)、在columnModel中设置列属性renderer:Ext.util.Format.dateRenderer('Y-m-d')可以控制日期的格式
(5)、行选择模型值(grid.getSelectionModel())负责选择行的方法(第一个、最后一个、下一个、上一个、选择指定的、选择全部)和行被选择的信息(是否被选中、取消指定的选择、得到选中的条目、判断是否还有上/下条)
(6)、通过grid.getView().getRows().length可以取得总行数
(7)、通过指定Ext.grid.RowNumberer()添加序号
(8)、通过指定Ext.grid.CheckboxSelectionModel()添加复选框,在Gridpanel中添加sm:sm
(9)、视图模型(GridView)有getRows()、getRow(row)、getCell(row,col)、refresh(true:是否表头也刷新)
(10)、通过grid.getStore().getAt(i).get('name')在模型记录中获得对应的数据内容,另外在Store中定义了add(record),insert(index,records),remove()remove(index),removeAll()
(11)、 grid.getColumnModel().getColumnById('tagline').sortable = true;可以通过列模型设置列是否可排序
同样:var colModel = grid.getColumnModel(); colModel.setHidden(column.getIndexById('tagline'), true)设置列为隐藏
(12)、enableColumnMove:false; 设置列不能拖动
(13)、从xml读取数据的准备有:在store中配置url,reader用XmlReader,XmlReader的第一个参数要用record设置数据行在xml中的根目录,最后用load()方法加载
(14)、从json读取数据和xml差不多,只用把XmlReader变为JsonReader,把record改为root,在json对象中要有一个success属性和root属性的一个对象数组
(15)、为列模型指定:Ext.grid.RowNumberer()配置学号
(16)、为列模型配置和GridPanel配置:Ext.grid.CheckboxSelectionModel()可以配备复选框
(17)、通过grid.getSelectionModel()获取选择模型,有selectFirstRow()、selectLastRow()、selectNext(keeping)、selectPrevious(keeping)、hasNext()、hasPrevious()、selectAll()、isSelected(index)、selectedRows(rows,
keeping)、selectRange(start, end, keeping)、deselectRow(index)、deselectRange(start, end)、getCount()
(18)、通过grid.getView().getRows().length可以获得总行数,GirdView中常用方法有:getRows()、getRow(index)、getCell(row,
col)、refresh(boolean)
(19)、grid.getStore().getAt(i).get('name')获取指定name的行,在store常用的方法有:add(records)、insert(index,records)、remove(record)、removeAll()
(20)、CellSelectionModel:一次选择一个单元格
RowSelectModel:一次选择一行
ColumnSelectionModel:一次选择一列
CheckBoxSelectionModel:使用checkbox来做行的选择
grid高级部分
一、显示摘要
grid有一个隐藏的RowBody,由GridView管理,在grid的viewConfig属性配置中,有属性forceFit(按一定比列拉伸列的宽度)、enableRowBody(启动RowBody)、showPreview(是否显示摘要)、getRowClass()设置RowBody的内容
配置如下:
viewConfig:{
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass:function(record,rowIndex,p,store){
if(this.showPreview){
p.body = '<p style="padding:5px;border:1px #DFE8F6 solid;margin:2px"><span style="color:#15428B;font-weight:bold;">备注:</span>顶替棋不日</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
二、分组
需要GroupingStore(Store的子类)和GroupingView(GridView)的支持,分组的依据是reader的name属性,要进行分组有以下准备:
(1):要配置GroupingStore,
var store = new Ext.data.GroupingStore({
proxy:proxy,
reader:reader,
groupField:'Sex',
autoLoad:true,
sortInfo:{field:'Sex',direction:'DESC'}
});
(2):在GridPanel中指定view:new Ext.grid.GroupingView()
(3):要使得分组和摘要同时显示,必须把先前的viewConfig配置写在view的GroupingView的配置里面
三、可编辑的EditorGridPanel
(1):EditorGridPanel的选择模型是CellSelectionModel,而且列模型要指定一个editor:new Ext.grid.GridEditor(),里面是是一些表单控件。
(2):在EditorGridPanel比以前多autoEncode:true,clickToEdit:1
(3):将记录设置为脏数据状态,并将修改后的记录存放在Record类型的数组modified中。当删除数据时,modified不变化,所以这些操作:删除Store,modified中指定的元素,触发remove事件,更新EditGridPanel视图
(4):可以用CellSelectionModel模型用getSelectedCell()获取单元格信息,返回如[3,4]这的行列坐标;用hasSelection()获取是否有有选中的单元格
(5):EditorGridPanel的验证和表单完全一样
四、paging分页
bbar:new Ext.PagingToolbar({
store:store,
pageSize:2,
displayInfo:true,
displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条',
emptyMsg:'没有记录!',
items:['-',{
icon:'../resources/images/default/dd/drop-yes.gif',
cls:'x-btn-text-icon',
pressed:true,
text:'隐藏备注',
cls:'x-btn-text-icon details',
toggleHandler:function(btn,pressed){
var view = grid.getView();
if(pressed){
btn.setText('隐藏备注');
}else{
btn.setText('显示备注');
}
view.showPreview = pressed;
view.refresh();
}
}]
})
相关文章推荐
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- ExtJs设置GridPanel表格文本垂直居中示例
- Extjs gridpanel使用遇到selectionchange被多次触发问题解决办法,grid表格复选框无法取消选中
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- ExtJs 设置GridPanel表格文本垂直居中
- Extjs GridPanel 表格
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- 【编程技巧】ExtJs 设置GridPanel表格文本垂直居中
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- Extjs-表格 Ext.grid.GridPanel
- Extjs-表格 Ext.grid.GridPanel
- ExtJs 设置GridPanel表格文本垂直居中
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- ExtJS 2.0 GridPanel基本表格简明教程
- Extjs学习总结之19表格组件gridpanel
- ExtJS 2.0 GridPanel基本表格简明教程