Ext.grid.EditorGridPanel
可編輯數據表格
Config {
clicksToEdit : Number //點幾次開始編輯,默認為2
}
方法
EditorGridPanel()
構造,應為 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
開始停止編輯
事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )
下面我們擴展一下剛才的示例應用一下EditorGridPanel//定義數組
var arr=[
['Bill', 'Gardener','2007-01-02',-10,true],
[ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
['你', 'Gardener','2007-02-02',0,true],
['他', 'Gardener','2007-01-04',13,false],
[ '我', 'Horticulturalist','2007-01-05',15.2,false]
];
var reader = new Ext.data.ArrayReader(
...{},
//定義數組到record的映射關系
[
...{name: 'name'},
...{name: 'occupation', mapping: 1},
...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式轉換日期
...{name:'float',type:'float'},
...{name:'bool',type:'bool'}
]
);
//生成元數據
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
//自定義可編輯列,從ext的示例抄的,但是卻要init郁悶
Ext.grid.CheckColumn = function(config)...{
Ext.apply(this, config);
if(!this.id)...{
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
//重寫了三個方法,捕捉mousedown修改數據
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
this.grid = grid;
this.grid.on('render', function()...{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t)...{
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record)...{
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}
//綁定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
header: "布爾值",
dataIndex: 'bool'
});
/**//*
現在配置列信息,為了本地化日期選擇器,請包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"確定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序號',width:30}),
...{header:'姓名',sortable: true,dataIndex:'name'},
...{header:'職業',sortable: true,dataIndex:'occupation'},
...{
id:'datacol',
header:'日期',
sortable:true,
dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化顯示
editor:new Ext.form.DateField()
},
...{header:'數值
',sortable:true,dataIndex:'float',renderer:formatFloat,align:
'right',editor:new Ext.form.NumberField()}, //自定義顯示方式,右對齊
checkColumn //這個"選擇框列"看起來的確漂亮些,其實是通過修改背景圖片實現的
]);
//配置視圖信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列顯示/隱藏';
//現在我們看看可編輯的數據表格能用了嗎
var grid=new Ext.grid.EditorGridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
//為什么原例不需要init?
checkColumn.init(grid);
grid.render();
function formatFloat(val)...{
var bgcolor;
if(val>0)...{
bgcolor='#FF0000';
}else if(val<0)...{
bgcolor='#00FF00';
}
else...{
bgcolor='#000000';
}
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}
Ext.grid.PropertyGrid
屬性表格.繼承自EditorGridPanel,用習慣ide的用戶都會喜歡這個簡單的屬性表格,
config{
customEditors : Object //自定義屬性編輯器
source : Object //數據源
}
方法
PropertyGrid( Object config )
構造
getSource() : Object
setSource( Object source ) : void
得到和設置數據源
事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed
同樣用一個簡單的示例來完成PropertyGrid的學習
var grid=new Ext.grid.PropertyGrid(...{
el:Ext.getBody()
,height:200
,width:400
,viewConfig : ...{forceFit:true}
,customEditors:...{
'年齡':new Ext.grid.GridEditor(new Ext.form.NumberField())
}
,source:...{
'姓名':'blackant'
,'年齡':100
}
});
grid.source['性別']='男';
grid.customEditors['性別']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
editable:false
,triggerAction: 'all'
,store: new Ext.data.SimpleStore(...{
fields: ['gender'],
data : [['男'],['女']]
})
,displayField:'gender'
,forceSelection:true
,mode:'local'
}));
grid.render();
選擇模式都很容易使用,略過,至于其它的擴展,有時間再慢慢研究了,第一步先以學會使用為主