在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
2009-12-24 11:23
1731 查看
在看官方的例子时候由一个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 Ext.grid.RowNumberer(),
//new Ext.grid.CheckboxSelectionModel(),
{header:"ID",width:50,sortable:true,dataIndex:'roles_id'},
{header:"名称", width:100,sortable:false,dataIndex:'roles_<?php echo $user_languag;?>_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();}},
'<font color="red">提示:双击一行可进行编辑!</font>'
],
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.grid.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.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('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.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});
接着定义模板,主要是显示展开的内容,用到Ext.template类
expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<br> <b>游戏权限:</b> {games}<br><br>',
' <b>下属人员:</b> {users}<br><br>'
)
});
接着载入grid就可以了。
首先定义表格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 Ext.grid.RowNumberer(),
//new Ext.grid.CheckboxSelectionModel(),
{header:"ID",width:50,sortable:true,dataIndex:'roles_id'},
{header:"名称", width:100,sortable:false,dataIndex:'roles_<?php echo $user_languag;?>_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();}},
'<font color="red">提示:双击一行可进行编辑!</font>'
],
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.grid.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.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('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.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});
接着定义模板,主要是显示展开的内容,用到Ext.template类
expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<br> <b>游戏权限:</b> {games}<br><br>',
' <b>下属人员:</b> {users}<br><br>'
)
});
接着载入grid就可以了。
相关文章推荐
- 刚发现了一个问题,关于vs2005 datagridview的,我发现在设计行标头的HeaderCell.Value的时候要是设置RowTemplate.Height 的值>= 17则行标头的那个黑三角就显示出来了,要是小于17就不能显示了,想问问大家,是怎么回事?
- 发现一个特别小巧的jquery插件可以在选择的时候显示小图
- 跟大家分享一个非常精简的夏令时转换程序,程序是通用的可以在51、430、PIC、瑞萨系列的单片机上使用
- 今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在Win中见过的/r回车符号。由于编辑软件的编码问题,某些IDE的编辑器在编辑完文件之后会自动加上这个^M符号。看起来对我们的源代码没有任何影响,其实并不然,当我们把源代码文件Check In到svn之类
- MyEclipse下如何安装和使用ibatis插件(网上的资料对于myeclipse8.5根本就是没有用的,所以我还是自己选择了装了一个eclipse,然后将插件装在了eclipse中)
- xdoclet的官方地址.在没有好的开发插件的情况下可以到这里参考标签的使用
- implementors一个eclipse面向接口编程的非常有用的插件:可以直接跳到接口的实现代码
- 还原Wss3.0内容数据库时遇到:"ComputerName\Microsoft##SSEE 上的 WSS_Content 包含用户定义的架构。数据库在能够使用之前必须为空。请删除所有表、存储过程以及其他对象,或使用其他数据库。 " 的提示,无法加载内容数据库
- Ext.grid.RowExpander插件的使用,
- 最近使用百度发现iOS,只要登录了一个百度APP,其他APP自动登录,于是就查阅资料了解缘由
- 使用ext的分页常见的一个问题:有分页下表,但分页内容无法显示
- web项目发布到服务器上,但是修改的css和js文件没有起作用,显示的还是之前没有修改的代码
- 大家用了这么久的.net有没有发现C#中可以用中文变量呀!!可用这个特性来彻底改变程序的易读性(搞笑).但其实有一个非常独特的用处的
- SWT实例学习代码例子 -- 学好swt,色色就可以写桌面应用了
- 这是一个求两数之和的题目,输入多对用空格分开的两个数a b,输出a+b的和,每一对数据的和占一行。编写代码时需要注意的是,由于没有指出有多少对输入数据,因此我们可以编写如下代码:
- EXT.NET 后台加载GridPanel,加载了却没有显示,原因旺旺如下
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
- Extjs实现多个Grid使用同一个Store,但显示不同的内容
- 文档显示部件:用word查看方法在word中直接显示文档显示部件中的内容,并可以设置是否允许修改word内容。 True:不允许修改word内容;false:允许修改word内容。 实例应用:在窗体
- 使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数。请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”。