对Extjs的grid使用,有时候单单使用其中的某些组、或某些行是远远不够的,还需要对行进行一些扩展,如:与filters相似的row扩展控件,如下

这个控件,我也是从网上找的小例子,按照其内部的某些方法,结合自己的工程,应用到相应的文件中,其使用过程还算简单。一般的扩展只需要在行的内部添加些文字或者图片就可以了,我在使用的时候,在行的内部又嵌套了一个grid,达到了多级显示数据的效果,具体界面如下:

外面一层是一个groupGrid,内部为其行添加扩展控件内部嵌套grid,这样看起来很适合多级数据的显示

//首先在grid内添加插件,形式上是,作为grid内部的一个属性
plugins: expander,
//添加expander,其实这种方法使用起来很简单
var expander = new Ext.grid.RowExpander
({
tpl: new Ext.Template('<div class="detailData"></div>')
});//定义控件 //添加进columnModel内
this._columnModel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_ColumnModel(expander, this._selections);
//这个时候页面内部在行的前面会显示'+'号, //之后点击‘+’号添加希望显示的内容,即调用.on定义的expand事件
expander.on("expand", function (expander, r, body, rowIndex) {
this._rowPanel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel('ConstructTaskItemsForApplyItemGrid
Panel', '', expander, r, body, rowIndex);
});
//在这里新建了一个gridpanel,将需要的参数传进去,获得相应的数据,
下面是具体的Panel定义,需要注意的只是其中的一个render,就可以获取确定的数据 Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel = function (panelId, title, expander, r, body, rowIndex) { var applyItemID = r.data.id;
var constructTaskItemStore = new Ipms.expertApplys.ExpertApplyAdjustStore(Ipms.service.off.Service + '/Query', {
applyItemID: applyItemID }); this._view = new Ext.grid.GridView({
forceFit: true,
ignoreAdd: true,
emptyText: '没有满足条件的条目'
}); var store = constructTaskItemStore;
this._selections = new Ext.grid.CheckboxSelectionModel();
this._columnModel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_ChildGridPanel_ColumnModel(this._selections, false); Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel.superclass.constructor.call(this, {
id: panelId,
store: store,
title: title,
cm: this._columnModel,
clicksToEdit: ,
autoExpandColumn: true,
enableColumnHide: true,
enableColumnMove: true,
stateful: true,
sm: this._selections,
renderTo: Ext.DomQuery.select("div.detailData", body)[],//最重要的一行,跟上面定义的detailData呼应,将内容渲染到定义了class的当前层。
viewConfig: {
forceFit: true,
emptyText: '没有满足条件的条目'
},
view: this._view,
autoWidth: true,
autoHeight: true
});
constructTaskItemStore.load();
}
Ext.extend(Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel, Ext.grid.EditorGridPanel);

至此,内部嵌套着grid的扩展行已经制作完毕,然而当选择外部某一行的时候会默认将内部grid的checkbox选中,但是虽然内部行已经打上“勾”,实际上内部行的选择值却是false,那么就需要取消外部选择行的事件,这时只需添加这样一行,就可以去除行选择的所有事件:

    this._selections.handleMouseDown = Ext.emptyFn; //不响应MouseDown事件

如果需要,添加其他的事件,则自己动手写就可以了,对应事件分别如下:

 sm.on('rowselect',function(sm_,rowIndex,record){//行选中的时候    ,sm定义的是selectModel
}, this);
sm.on('rowdeselect',function(sm_,rowIndex,record){//行未选中的时候
}, this);

Extjs的GridPanel的RowExpander的扩展的更多相关文章

  1. 给Extjs的GridPanel增加“合计”行(转)

    再Google,找到一个看似写的比较好的 http://www.cnblogs.com/over140/archive/2009/05/06/1449892.html 期间主要部分也是借鉴官方论坛上的 ...

  2. (Extjs)对于GridPanel的各种操作

    刚才做了个有点特殊的需求,在某窗口关闭时,要把Gridpanel中的选择行清空,因为如果不清空,直接双击,就不能即时更新出来我想要的内容. 答案是:Grid.getSelectionModel().c ...

  3. Extjs中GridPanel的各个属性与方法

    1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充 ...

  4. Extjs的GridPanel分页前后台完整代码实例

    第一次写文章啊,有些冲动.最近在公司学习Extjs,做了一个分页的小实例和大家分享. 1.首先编写paging-grid.js文件,这是我在网上参考的例子改写的,大同小异. Ext.onReady(f ...

  5. ExtJS:GridPanel之renderer:function()和itemdblclick : function()方法参数详解

    要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: Ext.define("Gpsdata", { exte ...

  6. ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧

    这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> ...

  7. ExtJs中gridpanel分组后组名排序

    /** * 定义降序的groupingStore */ var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : ...

  8. ExtJs 设置GridPanel表格文本垂直居中

    业务场景,需要实现最终效果图如下: GridPanel代码如下配置: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'cente ...

  9. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

随机推荐

  1. js实现基础运动

    首先我定义3个div每个div当我鼠标放上去的时候,他的宽度就表达,如下图 首先是样式和html代码 <style> div{ width:100px; height:50px; back ...

  2. java新项目的eclipse统一配置记录

    1.new java file的模版 /** * @Title:${file_name} * @Copyright: Copyright (c) 2016 * @Description: * < ...

  3. COOKIE&&SESSION

    ---------------------------------------------------------------------------COOKIE------------------- ...

  4. Easyui修改样式

    背景:公司一个后台管理系统做的网站,构架采用Asp.net MVC4.0 + EasyUI, 请了美工做了切图,结果发现美工不懂Easyui,切图的风格又都是直角风格. 而Easyui默认风格是圆角. ...

  5. 相同的问题又出现了,struts2取不出数值

    debug里面是有数值的,不知道是不是又是表示错了.全部改成了小写也无济于事.正在想法解决中... 问题解决了,因为自己的不仔细,问题还是出在了action的set,get方法里,不是大小写没注意,改 ...

  6. TIJ读书笔记08-数组的初始化和可变长参数形参

    TIJ读书笔记08-数组的初始化和可变参数形参 数组 数组的声明 数组的初始化和赋值 可变参数列表 数组 相同类型的,用一个标识符名称封装到一起的一个对象序列或者基本数据类型序列叫数组.(多么严谨的概 ...

  7. 如何做一个avalon组件

    在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以AMD形式组织,引入HTML ...

  8. 手把手教你编写一个具有基本功能的shell(已开源)

    刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...

  9. [翻译]Shape comparison language

        link: http://www.cnblogs.com/yhlx125/p/3635623.html   Shape comparison language 首先说说我遇到的一个问题: IR ...

  10. Docker常用操作

    启动容器并安装package docker run xxx apt-get -y xxx 其中-y要加上避免无法交互 批量删除容器 docker ps -a | awk '{print $1}' |x ...