一些EXTJS2.2使用例子
工作中常用的ExtJS控件使用实例
虽然版本陈旧，框架性的东西还是记录下来，若以后用到好依葫芦画瓢 
/**
* Grid
*/
// 表格创建
var sm = new Ext.grid.CheckboxSelectionModel();
var operation = {
header : '操作',
dataIndex : 'orderId',
align : 'center',
width : 43,
renderer : function(val) {
var htmlStr = '<a onclick="payOrdList.edit(' + val + '); return false;" href="#">' +
'<img style="border:0px" alt="编辑" src="' + buildURL('/pub/images/tbtn_amend.gif') + '"/></a>';
htmlStr += '<span>|</span>' +
'<a onclick="payOrdList.remove(' + val + '); return false;" href="#">' +
'<img style="border:0px" alt="删除" src="' + buildURL('/pub/images/tbtn_delete.gif') + '"/></a>';
return htmlStr;
}
};
var cmItems = [sm, operation,
{
header : '列1',
dataIndex : 'payMOnth',
align : 'center',
width : 57
},
{
header : '列2',
dataIndex : 'ordernum',
width : 115
},
{
header : '列3',
dataIndex : 'startTime',
// renderer : formateDateAction,
width : 65
},
{
header : '列4',
dataIndex : 'nexttime',
renderer : function(val) { return formateTime(val); },
width : 116
},
// 其它列项
{
header : '列N',
dataIndex : 'cusstatDesc',
align : 'center',
width : 63
}
];
var cm = new Ext.grid.ColumnModel(cmItems);
var gridConfig = Ext.apply(config, {
sm : sm,
cm : cm,
viewConfig : {
forceFit : false
},
loadMask : true，
store : payOrdGridStore,
tbar : toolbar
});
var grid = new Ext.grid.GridPanel(gridConfig);
var rowdblclick = function(grid, rowIndex, eventobj) {
var store = grid.getStore();
var orderId = store.getAt(rowIndex).id;
// ... ... ...
};
grid.on('rowdblclick', rowdblclick);
// 使用SelectionModel 取已选择的行
var selectedRows = grid.getSelectionModel().getSelections();
if(selectedRows.length === 0) {
Ext.Msg.alert(YoushangTips, '至少选择一条记录！');
return ;
}
for(var i=0; i<selectedRows.length; i++) {
orderIds.push(selectedRows[i].id);
}
// ... ... ...
}
/**
* Grid Plugin(RowExpander),扩展了一个isCollapsed配置项(可指定行默认是否收起)
*/
// 使用
var rx = new Ext.grid.RowExpander({
tpl : new Ext.Template('<div style="margin: 0px 0px 8px 56px;"><ul><li style="list-style-type:disc;"><h2>详细内容:</h2><p style="width: 450px; line-height: 150%; margin: 3px 0px 5px 25px;">{cOntent}<p/></li>{qDesc}</ul></div>'),
isCollapsed : false,
enableCaching : false
});
var cm = new Ext.grid.ColumnModel([rx,{
header : '列1',
dataIndex : 'recIndex',
align : 'center',
width : 56
},
// 其它列项
{
header : '列N',
dataIndex : 'callstatDesc',
// align : 'center',
width : 100
}
]);
var grid = new Ext.grid.GridPanel({
store : store,
tbar : toolbar,
cm : cm,
plugins : rx,
loadMask : true
});
// RowExpander源文件
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
Ext.grid.RowExpander = function(config){
Ext.apply(this, config);
this.addEvents({
beforeexpand : true,
expand: true,
beforecollapse: true,
collapse: true
});
Ext.grid.RowExpander.superclass.constructor.call(this);
if(this.tpl){
if(typeof this.tpl == 'string'){
this.tpl = new Ext.Template(this.tpl);
}
this.tpl.compile();
}
this.state = {};
this.bodyContent = {};
};
Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
header: "",
width: 20,
sortable: false,
fixed:true,
menuDisabled:true,
dataIndex: '',
id: 'expander',
lazyRender : true,
enableCaching: true,
isCollapsed : true, // 默认行是否收缩标志
getRowClass : function(record, rowIndex, p, ds){
p.cols = p.cols-1;
var content = this.bodyContent[record.id];
if(!content && !this.lazyRender){
content = this.getBodyContent(record, rowIndex);
}
if(content){
p.body = content;
}
if(this.isCollapsed) return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
if(!this.isCollapsed) return this.state[record.id] ? 'x-grid3-row-collapsed' : 'x-grid3-row-expanded';
},
init : function(grid){
this.grid = grid;
if(!this.isCollapsed) this.lazyRender = false;
var view = grid.getView();
view.getRowClass = this.getRowClass.createDelegate(this);
view.enableRowBody = true;
grid.on('render', function(){
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
getBodyContent : function(record, index){
if(!this.enableCaching){
return this.tpl.apply(record.data);
}
var content = this.bodyContent[record.id];
if(!content){
content = this.tpl.apply(record.data);
this.bodyContent[record.id] = content;
}
return content;
},
onMouseDown : function(e, t){
if(t.className == 'x-grid3-row-expander'){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
this.toggleRow(row);
}
},
renderer : function(v, p, record){
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"> </div>';
},
beforeExpand : function(record, body, rowIndex){
if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
if(this.tpl && this.lazyRender){
body.innerHTML = this.getBodyContent(record, rowIndex);
}
return true;
}else{
return false;
}
},
toggleRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
},
expandRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
if(this.beforeExpand(record, body, row.rowIndex)){
this.state[record.id] = true;
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
this.fireEvent('expand', this, record, body, row.rowIndex);
}
},
collapseRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
this.state[record.id] = false;
Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
this.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});
/**
* Toolbar
*/
var toolbar = new Ext.Toolbar({
border : true,
autoWidth : true,
items : [{
text : '按钮1',
tooltip : '提示',
iconCls : 'tb-distribute',
hidden : !isAdmin,
handler : function() {
// ... ... ...
}
}
, '-', {
text : '按钮2',
tooltip : '提示',
iconCls : 'tb-customerview',
handler : function() {
// ... ... ...
}
}]
});
/**
* DataStore
*/
var myStore = new Ext.data.Store({
proxy : new Ext.data.XXXProxy({
XXXFunc : function(params) {
if (params && !params.start && !params.limit) {
params.start = 0;
params.limit = 700;
}
var conditions = this.filter.getValue();
if(params.ownerId) {
conditions.ownerId = params.ownerId;
}
var data = payOrdApi.findHeadInfo(params.start, params.limit, conditions);
return {
total : data.length,
list : data
};
}.bind(this)
}),
reader : new Ext.data.JsonReader({
root : 'list',
totalProperty : 'total',
id : 'orderId'
} , ['orderId', 'payMOnth', /*... ... ...*/]
)
});
myStore.load({
callback : function() {
// ... ... ...
var num = this.getCount();
// ... ... ...
}
});
/**
* Layout And View
*/
var view = new Ext.Viewport({
layout : 'fit',
items : [{
layout : 'border',
defaults : {autoScroll : true},
items : [{
region : 'north',
title : '上部区域',
height : 265,
shim : false,
collapsible: true,
items : [panel]
}, {
id : 'addTrack_panel',
hidden : !isAssignedFlag,
region: 'east',
title : '右部区域',
width : 405,
bodyStyle : 'padding-top:19px;',
shim : false,
collapsible: true,
collapsed : true,
items : [firstSingleTrackView.panel, singleTrackView.panel]
}, {
region: 'center',
layout : 'fit',
title : '中心区域',
border: true,
shim : false,
items : [grid]
}]
}]
});
view.show();