快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡新京:Ext.grid.RowExpander插件的使用



在看官方的例子时刻由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际利用中照样异常有用的,照搬例子的代码,发明总是提示工具不存在,查阅资料后发明是没有加载插件,这里和大年夜家分享下Ext.grid.RowExpander插件的应用,

首先定义表格grid

//天生表格

function makeGrid(){

return new Ext.grid.GridPanel({

border:false,

viewConfig: {

forceFit:true//加入该选项全屏显示表格且自适应大年夜小,不孕育发生横向滚动条

},

buttonAlign :'left',

region:'center',

plugins: expander,//定义插件

loadMask: true,

store: ds,

cm: new Ext.grid.ColumnModel([

expander,//加载插件

new E澳门新葡新京xt.grid.RowNumberer(),

//new Ext.grid.CheckboxSelectionModel(),

{header:"ID",width:50,sortable:true,dataIndex:'roles_id'},

{header:"名称", width:100,sortable:false,dataIndex:'roles__name'},

{header:"类型", width:100,sortable:false,renderer:check,dataIndex:'roles_type'}

]),

//sm:new Ext.grid.CheckboxSelectionModel(),

//autoExpandColumn:4,

autoScroll: true,

tbar: [

{text:"添加",iconCls:'add_role',handler:newRole},{xtype:'tbseparator'},

//{text:"删除",iconCls:'del',handler:del},{xtype:'tbseparator'},

{text:"复制权限",iconCls:'copy',handler:copyRole},{xtype:'tbseparator'},

{text:"刷新",iconCls:'refresh',handler:function (){ds.reload();}},

'提示:双击一行可进行编辑!'

],

bbar: new Ext.PagingToolbar({

pageSize: 50,

store: ds,

displayInfo: true,

displayMsg: '第{0} 到 {1} 条数据 共{2}条',

emptyMsg: '没稀有据'

})

});

}

接着在天生表格之前加载插件,插件代码在ext官方论坛找到

/奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫

Ext.grid.RowExpander插件

奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫/

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.gri澳门新葡新京d.RowExpander, Ext.util.Observable, {

header: "",

width: 20,

sortable: false,

fixed:true,

menuDisabled:true,

dataIndex: '',

id: 'expander',

lazyRender : true,

enableCaching: 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;

}

return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';

},

init : function(grid){

this.grid = grid;

var view = grid.getView();

view.getRowClass = this.getRowClass.createDelegate(this);

view.enableRowBody = true;

grid.on('render', function(){

view.mainBody.on('mousedown', this.onMouseD澳门新葡新京own, 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 '

 

';

},

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('beforcollapse', this, record, body, row.rowIndex) !== false){

this.state[record.id] = false;

Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');

this.fi澳门新葡新京reEvent('collapse', this, record, body, row.rowIndex);

}

}

});

接着定义模板,主如果显示展开的内容,用到Ext.template类

expander = new Ext.grid.RowExpander({

tpl : new Ext.Template(

'

游戏权限: {games}

',

' 下属职员: {users}

'

)

});

接着载入grid就可以了。

以下是完备页面代码:

var win;

var addrolewin;

var copywin;

var grid;

var expander;

var ds;

//编辑角色

function actionEditEvent() {

var record = grid.getSelectionModel().getSelected();

if (record) {

win = new Ext.Window({

id:id,

title:"编辑用户组",

您可能还会对下面的文章感兴趣: