一:编辑事件
C层:
//5.edit事件
/*
"usergrid":{
edit:function(editor , e , options){
//alert(e);
var models = e.record;//变化的model
//ajax(){
// models.commit();//消除编辑的标记
//}
}
},*/
"usergrid button[id=save]":{
click:function(btnObj){
var gird = btnObj.ownerCt.ownerCt;
var store = gird.getStore();
//==>此处先ajax 后同步
store.sync();
var records = store.getUpdatedRecords();
Ext.Array.each( records , function(model){
var m = model;
model.commit();
});
}
}
二:选择指定行列
C层:
//3.selection按钮
"usergrid button[id=selection]":{
click:function(btnObj){
//alert(o.text);
var gird = btnObj.ownerCt.ownerCt;
var selectionModel = gird.getSelectionModel();
var dataArray = gird.getSelectionModel().getSelection();
//alert("==>最后选择的是:"+selectionModel.getLastSelected().get("name"));
//alert("==>0号是否被选上"+selectionModel.isSelected(0));
//取消选择,无分页的情况
// $.each(dataArray , function(i,model){
// selectionModel.deselect(model.get("userId")-1);
// });
//==>选上0号和1号, true是不清空之前选择 并且加上0和1两个选项
//selectionModel.selectRange(0,1,true);
//==>选择特定位置的cell
selectionModel.selectByPosition({"row":1,"column":1});
}
},
三:拖动排序功能:
V层:
//==>拖拽排序功能, 应该有顺序编号, 拖拽后仅编号变化
//对应M层:必须有排序依据{ name : "index" , type : "int" , sortable : true }
//对应C层:配drop事件的listeners
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop',{
ddGroup:"ddTree",
dragGroup:"usergrid",//拖拽组, 同一表格应是一个
dropGroup:"usergrid",
enableDrag:true,
enableDrop:true
})
],
listeners:
{
drop:function( node , data , dropRec , dropPosition )
{
var store = this.getStore();
for( i=0; i<store.getCount();i++)
{
store.getAt(i).set('index', i+1);//model类的set,写入编号
}
}
}
},
四:复杂表头
实测 使用后会影响其他一些功能的触发
V层:
//表头
columns : [
{ text:"组合表头",locked:true,columns : [
{text:"index" , dataIndex : "index",width:50},//拖拽序号
{text:"userId" , dataIndex : "userId",width:50,//dataIndex类会去寻找Store类或者对应Model中的键值
field:{xtype : "textfield", allowBlank:false}
},
]},
五:表格自动行号
V层:
//==>4.表格行号
Ext.create("Ext.grid.RowNumberer",{}),
六:允许在表格里使用键盘
V层:
enableKeyNav : true,
七:动态引入插件
app.js:
//引入ux包
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);