1. 表格面板类Ext.grid.Panel基本属性。（两个别名xtype:gridpanel, grid）
重要的配置参数：
（1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
列里面的常用配置参数：
text : String 列的标题 默认是""
dataIndex : String 和Model的列一一对应的
field: {} //配合插件使用，告诉插件在那一列起作用
xtype:默认为gridcolumn
renderer : function(value) //可以列里面值显示之前，做一些改变。
//参数value就是列的值，我可以在函数处理后，返回其改变后的值。
（2）title : String 表格的标题，如果不写默认表格是没有头标题那一栏。
（3）renderTo : Mixed 把表格渲染到什么地方，即展示到那个元素里面。
（4）width : Number 宽
（5）height: Number 高
（6）frame : Boolean 是否填充渲染这个Panel（渲染的比较好看）
（7）forceFit : true 设定表格列的长度是否自动填充
（8）store : store 数据集合
（9）tbar: [] 头部工具栏，里面可以放置各种按钮
（10）bbar：[] 底部操作栏，一般放分页面板
（11）dockedItems : Object/Array 更具有位置的灵活性,当你用这个属性时,
可以指定工具条停靠在表格中上下左右位置；可以用来替换tbar与bbar。
（12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',
选择模式即选中记录方式：选择框/鼠标单击或双击行选择/鼠标单击或双击单元格选择
（用多选框模式时,forceFit属性最好不启用，或则样式不好看）
（13）multiSelect :true,//允许多选 与上面属性联合属性
（14）plugins :[] 插件的形式，为表格添加一些特殊的功能（eg：单元格编辑、行编辑以及行拖拽等）
例子可以参考上面MVC里面view层里面的grid定义。
2. 常用表格的列都有哪些类型。
（1）Ext.grid.column.Column xtype: gridcolumn 普通列
（2）Ext.grid.column.Action xtype: actioncolumn
在表格中渲染一组图标按钮,并且为他赋予某种功能，类似于链接
altText : String 设置应用image元素上的alt
handler : function(view,rowindex,collndex,item,e);
icon : 图标资源地址
iconCls : 图标样式
items : 多个图标的数组 //在使用MVC的时候建议不要用 如果大家有好得放大请与uspcat联系
function(o,item,rowIndex,colIndex ,e)
stopSelection : 设置是否单击选中不选中
（3）Ext.grid.column.Boolean xtype: booleancolumn
falseText,
trueText
（4）Ext.grid.column.Date xtype: datecolumn
format:'Y年m月的日'
（5）Ext.grid.column.Number xtype: numbercolumn
format:'0,000'
（6）Ext.grid.column.Template xtype: templatecolumn
xtype:'templatecolumn',
tpl :"${字段的名称}" 可以进行动态的组合字段的值，作为该字段的值。
（7）Ext.grid.RowNumbererxtype: rownumberer //显示行号
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1000,
height: 280,
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',100},
{text:"age",dataIndex:'age',100},
{text:"email",dataIndex:'email',200,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'sex',
dataIndex:'sex',
50,
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "<font color='green'>"+value+"</font>"
}else if(value == "男"){
return "<font color='red'>"+value+"</font>"
}
}
}
},{
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
50,
trueText:'是',
falseText:'不是'
},{
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
150,
format:'Y年m月d日'
},{
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
150,
format:'0,000'
},{
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年龄是{age}',
150
},{
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
50//,
// items :[
// {},{}
// ]
// handler:function(grid,row,col){
// alert(row+" "+col);
// }
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2 //单击几下
})
],
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
3. 选择模型Ext.selection.Model的用法（嵌套在一些高级组件使用）以及表格的一些特性功能。
选择模型Ext.selection.Model的用法
（1）选择模式的根类Ext.selection.Model (通过选择模式里面提供的方法进行操作行的选择)
重要方法：
撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
得到选择的数据getSelection( ) : Array
得到最后被选择数据getLastSelected( ) : void
判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
选择你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
keepExisting true保留已选则的项,false重新选择，不保留已选则的项
（2） 隐藏了一个单元格的选择模式 selType: 'cellmodel' (从这发现的Ext.grid.plugin.CellEditing)
重要方法
得到被选择的单元格getCurrentPosition() Object
Ext.JSON.encode()
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
selectByPosition({"row":5,"column":6}) 很实用，选中你要特殊处理的数据单元格
（3） Ext.selection.CheckboxModel 多选框选择器
重要方法
（4）Ext.selection.RowModel rowmodel 行选择器（通过鼠标单击表的行记录进行选择）
重要属性
multiSelect 允许多选
simpleSelect 单选选择功能
enableKeyNav 允许使用键盘上下键选择
表格的一些特性功能
（1）Ext.grid.feature.RowBody 表格的行体（在行的下面来一个空白行，显示你所需要的信息）
重要方法
getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
如果你要展示这个面板那么必须复写这个方法
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData:function(data,idx,record,orig){
......
}
})
],
2.必须返回行体的对象
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
（2）Ext.grid.feature.AbstractSummary negative 能够在表格数据的最后做一些统计功能。
（eg：统计某一列的平局值等）
Ext.grid.feature.Summary
实用方法是在
第一步
features: [{
ftype: 'summary'
}],
第二步
columns中配置summaryType: 'count', (count,sum,min,max,average)
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format(' : '+value);
}
用于对某一列，进行求平均值等。
（3）Ext.grid.feature.Grouping
在store中设置可以分组的属性
groupField : ' '
在view中增加代码
Ext.create("Ext.grid.feature.Grouping",{
groupByText : "职业分组",
groupHeaderTpl : "职业{name} 一共{rows.length}人",
showGroupsText : "展示分组",
startCollapsed : true
}
（4）其它功能:
重要事件
groupclick
groupdblclick
groupcontextmenu
groupexpand
groupcollapse
（5）Ext.grid.feature.GroupingSummary
（6）Ext.grid.feature.Chunking
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: record.get('email'),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}),{
ftype: 'summary'
},Ext.create("Ext.grid.feature.Grouping",{
groupByText : "性别分组",
groupHeaderTpl : "性别{name} 一共{rows.length}人",
showGroupsText : "展示分组"
})
],
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',100},
{text:"age",dataIndex:'age',100,
summaryType:'average',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.util.Format.number(value,"00.0")
}
},
{text:"email",dataIndex:'email',200,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'sex',
dataIndex:'sex',
50,
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "<font color='green'>"+value+"</font>"
}else if(value == "男"){
return "<font color='red'>"+value+"</font>"
}
}
}
},{
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
50,
trueText:'是',
falseText:'不是'
},{
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
150,
format:'Y年m月d日'
},{
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
150,
format:'0,000'
},{
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年龄是{age}',
150
},{
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
50//,
// items :[
// {},{}
// ]
// handler:function(grid,row,col){
// alert(row+" "+col);
// }
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'del',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
})
],
//selType:'rowmodel',//设定选择模式
selType:'cellmodel',
//multiSelect:true,//运行多选
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist':{
itemclick:function(View, record, item, index, e, options ){
var sm = View.getSelectionModel();//.getSelection();
//alert(Ext.JSON.encode(sm.getCurrentPosition()));
sm.selectByPosition({"row":1,"column":2});
}
},
'userlist button[id=selection]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var sm = gird.getSelectionModel();
//sm.deselect(0);
//alert(sm.getLastSelected().get('name'))
//alert(sm.isSelected(0));
//sm.selectRange(1,2,true);
sm.selectByPosition({"row":2,"column":3});
}
},
'userlist button[id=del]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.后台操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前端操作DOM进行删除(ExtJs)
}
}
},
"userlist actioncolumn[id=delete]":{
click : function(o,item,rowIndex,colIndex ,e){
alert(rowIndex+" "+colIndex);
}
}
});
},
views:[
'List'
],
stores :[
"Users"
],
models :[
"User"
]
});
4.插件使用以及其它的特性使用。
（1）可编辑插件的根 Ext.grid.plugin.Editing
Ext.grid.plugin.Editing
Ext.grid.plugin.CellEditing 这个不讲(之前课程讲过)
保存修改的两种办法：
a、设立保存按钮,用户单击的时候保存数据
st.sync(); //数据与后台进行同步，一般不用，他会把整个记录传到后台
//如果不写这句，下面的语句是得不到数据的
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit(); //前台的小红点会消失
});
我们可以selectModel来获得修改的数据，组装后在往后台传入。
b.注册edit事件
e.record.commit(); //前台的小红点会消失
Ext.grid.plugin.RowEditing
使用方法:(有Bug推荐4.0.1a版本还是不要用这个功能)
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
（2）Ext.grid.plugin.DragDrop 表格拖拽
主意:配置有变化
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组()名称
dropGroup :'userlist' //释放租名称
enableDrag:true, //是否启用
enableDrop:true
})]
}
处理事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
（3）Ext.toolbar.Paging 分页组件
//第一种常用分页
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
//第二种分页的形式(条状，拨动分页)
Ext.Loader.setPath('Ext.ux', 'http://www.cnblogs.com/../extjs4/examples/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.SlidingPager'
]);
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {}) ---- 重点是这
})
（4）Ext.grid.property.Grid
属性配置框面板
当通过页面自动配置一些属性时候了可以考虑用
（5）列锁定
{text:"age",dataIndex:'age',100,locked:true},类似于excel里的冻结功能
（6）复杂表头
列里面又包含列(不能和字段过滤一起使用)
columns：{
text:'other',columns:[
{text:"age",dataIndex:'age',100,locked: true},
{text:"int",dataIndex:'index',100}]
}
（7）字段过滤
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
Ext.define("AM.class.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
view层中
features: [Ext.create("AM.class.filters")],
列中添加配置{filterable: true,text:"age",dataIndex:'age',100,filter: {type: 'numeric'}}
Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
//{text:"Name",dataIndex:'name',100,locked:true},
{text:"Name",dataIndex:'name',100},
//{text:'others',columns:[
{text:"age",dataIndex:'age',100,filterable: true,filter: {type: 'numeric'}},
{text:"email",dataIndex:'email',250,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'index',dataIndex:'index',100
}
//]}
],
features: [Ext.create("AM.util.filters")],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
}],
//plugins:[
// Ext.create("Ext.grid.plugin.CellEditing",{
// clicksToEdit : 2
// })
// Ext.create('Ext.grid.plugin.RowEditing', {
// clicksToEdit: 1
// })
//],
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组名称
dropGroup :'userlist', //释放租名称
enableDrag:true, //是否启用
enableDrop:true
})],
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
},
//selType:'checkboxmodel',//设定选择模式
//multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});