Ext选择模式与表格特性详解

一、选择模式的根类Ext.selection.Model
重要方法
1.撤销选择deselect(Ext.data.Model/Index records,Boolean sippressEvent): void
2.得到选择的数据 getSelection() ：Array
3.得到最后被选择的数据 getLastSelected() :返回model类对象
4.判断你指定的数据是否被选择上 isSelected(Record/Number record)：Boolean
5.选择你指定的行 selectRange(Ext.data.Model/Number startRow,Model/Number endRow,Boolean keepExisting)
参数分别传入开始行和结束行 keepExisting true表示保持以前选择的  false重新选择
隐藏了一个单元格的选择模式selType："cellmodel"(从这发现的Ext.grid.plugin.CellEditing)
重要方法：
1.得到被选择的单元格getCurrentPosition()  Object
Ext.JSON.encode()
itemclick(Ext.view.View this,Ext.data.Model record, HTMLElement item,Number index,Ext.EventObject e,Object options)
2.selectByPosition({"row:"5,"column":6}) 选中指定的单元格  很实用选择你要处理的特殊数据
二、Ext.selection.CheckboxModel 多选框选择器
在12文档中有具体说明
三、Ext.selection.RowModel   rowmodel  行选择器
重要属性：
1.multiSelect 允许多选  用键盘按住Ctrl键+点击
2.simpleSelect 单选选择功能 指定单击就可以实现多选
3.enableKeyNav 允许使用键盘  用键盘上下键等可以实现选择
四、Gird的特性 Ext.grid.feature.Feature
1.Ext.grid.feature.RowBody 表格的行体
重要方法：
1.getAdditionalData(Object data,Number idx,Ext.data.Model record,Object orig)
1)如果你要展示这个模版那么必须复写这个方法
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
Ext.grid.feature.Summary //设置表格的摘要信息
使用方法是在
1)第一步
features:[{
ftype:"summary"
}]
2)第二步
columns中配置summaryType:"count",(count,sum,min,max,average)
summaryRenderer:function(value,summaryData,dataIndex){
return Ext.util.Format.number(value,"00.0"); 
}
3.Ext.grid.feature.Grouping
1.在store层中设置可以分组的属性
groupField:""
2.在view层中增加代码
Ext.create("Ext.grid.feature.Grouping",{
groupByText:"性别分组",
groupHeaderTpl:"性别{name}  一共(rows.length)人",
showGroupsText:"展示分组",
startCollapsed:true //是否收起分组
})
重要事件：
groupclick
groupblclick
groupcontextmenu
groupexpand
groupcollapse
Ext.grid.feature.GroupingSummary、Ext.grid.feature.Chunking 可以参考API来来配置

代码实现：
controller层代码实现
增加了两个事件的机制：
"userlist":{
itemclick:function(view,record,item,index,e,options){
var sm=view.getSelectionModel();//获取选择模式对象
// alert(Ext.JSON.encode(sm.getCurrentPosition())); //遍历坐标地址     也可以通过record遍历，时间比较长
// sm.selectByPosition({row:2,column:3});
}
},
"userlist button[id=selection]":{
click:function(o){
var grid=o.ownerCt.ownerCt;
var sm=grid.getSelectionModel();
//sm.deselect(1); //撤销选择， 传入索引坐标
//getSelection() 得到选择的对象数组
//alert(sm.getLastSelected().get("name")); //得到最后选择的那个数据对象
//alert(sm.isSelected(1));// 判断这条数据是否被
//sm.selectRange(1,3,true); //选中指定的开始和结束行并保存以前的选择
sm.selectByPosition({row:2,column:3});
}
},
view层代码(全):
Ext.define("AM.view.List",{
extend:"Ext.grid.Panel",
title:"Grid Demo", //标题
frame:true,  //面板渲染
alias:"widget.userlist",  //设置别名
//forceFit:true, //设置是否自动填充
width:1300,
height:350,
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:"展示分组",
startCollapsed:false  //设置是否展示分组
})
],
columns:[  //列模式  并设置前台编辑
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:"name",width:100},
{text:"Age",dataIndex:"age",width:100,
//配置摘要信息
summaryType:"average",
summaryRenderer:function(value,summaryData,dataIndex){
return Ext.util.Format.number(value,"00.0");
}
},
{  //个性化显示数据
text:"性别",
dataIndex:"sex",
renderer:function(value){
if(value=="女"){
return "<font color='green'>女</font>";
}else if(value=="男"){
return "<font color='red'>男</font>";
}
}
},
{text:"Email",dataIndex:"email",width:200,
field:{
xtype:"textfield",
allowBlank:false
}
},{ //显示boolean类型
text:"isIt",
xtype:"booleancolumn",
dataIndex:"isIt",
trueText:"是",
falseText:"不是"
},{
text:"生日",
xtype:"datecolumn",
dataIndex:"birthday",
format:"Y年m月d日",
width:150
},{ //显示number类型
text:"收入",
xtype:"numbercolumn",
dataIndex:"deposit",
format:"0,000",
width:150
},{ //templatecolumn列模式的使用
text:"描述",
xtype:"templatecolumn",
tpl:"名字是{name},年龄是{age}",
width:150
},{ //Action模式的使用，增加事件机制，在controller层用别名查找方式来指定事件，也可以用handler字段
text:"Action",
xtype:"actioncolumn",
id:'del',
icon:"app/view/image/delete.jpg",
width:50
}
],
tbar:[   //上方工具栏
{xtype:"button",text:"添加",iconCls:"table_add"},
{xtype:"button",id:'delete',text:"删除",iconCls:"table_delete"},
{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:"checkboxmodel",  //设置选择模式，设置成多选框的模式
// multiSelect:true,   //设置成多选
// selType:"rowmodel",  //设置选择模式为行选择模式
// multiSelect:true,   //指定可以多选
// simpleSelect:true,  //指定单击就可以实现多选
// enableKeyNav:true,  //允许使用键盘选择
selType:"cellmodel", //单元格的选择模式
multiSelect:true,
// renderTo:"griddemo",
store:"Users", //指定数据集
initComponent:function(){
this.callParent(arguments);
}
});
Store层也修改：在上面提示已经说明
groupField:"sex",