ExtJS4 表格的嵌套 rowExpander应用

今天做一个grid，里面的数据需要带明细，思来想去还是搞个表格嵌套吧！看下图

对于grid中每一条记录点击左边的+号能展开一个明细的子表格 所有数据包括列名均从后台获得，子表格的数据暂时在本地以做测试

在此贴一些代码留下记录


代码如下:

function displayInnerGrid(renderId) {

//Model for the inside grid store
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Field1' },
{ name: 'Field2' },
{ name: 'Field3' }
]
});

//dummy data for the inside grid
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b'],
['c', 'c', 'c']

];

var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
});

innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
columns: [
{ text: "明细1", dataIndex: 'Field1' },
{ text: "明细2", dataIndex: 'Field2' },
{ text: "明细3", dataIndex: 'Field3' }
],
columnLines: true,
autoWidth: true,
autoHeight: true,
//width: 400,
//height: 200,
frame: false,
// iconCls: 'icon-grid',
renderTo: renderId
});

/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */

}

function destroyInnerGrid(record) {

var parent = document.getElementById(record.get('id'));
var child = parent.firstChild;

while (child) {
child.parentNode.removeChild(child);
child = child.nextSibling;
}

}

代码如下:

grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
//console.log(record.get('id'));
displayInnerGrid(record.get('id'));
});

grid_huizong.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
});

以上代码为grid绑定事件。。具体代码啥意思应该能看懂

注意在定义grid的时候使用


代码如下:

plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<div id="{id}">',
'</div>'
]
}],

这个是rowexpander插件。。网上有人说用的时候需要引用，但是我没引用什么也可以用了？

注意上面三段代码中关键的id，这个id你可以改，但是需要改成后台发过来的数据中fields中的第一项。。我这个例子后台发过来的fields第一项是id

赞 (0)

相关推荐

  • extjs表格文本启用选择复制功能具体实现

    extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: <style type="text/css"> .x-selectable, .x

  • 使用FlexiGrid实现Extjs表格效果方法分享

    使用FlexiGrid实现Extjs表格效果方法分享

    近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不过兄弟我可是不敢,原因很简单:太大/太笨/源码不好调试.但是对于Extjs漂亮的表格与功能的强大,实在是让我垂涎三尺,记得以前有个老外同志写过一个类似的Extjs的Jquery插件,所以就在Jquery的插件海洋中一顿海找,呵呵,还真让我找到了.看来还是我的Jquery好,小巧简单好像一部好的汽车引擎,我想要什么就可以自已DIY,真是方便.总体方案在网络传输上不超过80KB,速度比500KB大

  • ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

  • 自定义ExtJS控件之下拉树和下拉表格附源码

    自定义ExtJS控件之下拉树和下拉表格附源码

    简介 在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么难了.下面是下拉树的代码: 复制代码 代码如下: Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = th

  • JavaScript的ExtJS框架中表格的编写教程

    JavaScript的ExtJS框架中表格的编写教程

    ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore- 一个表格的基本编写过程: 1.创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header:

  • Extjs根据条件设置表格某行背景色示例

    话不多说,贴上代码 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3

  • ExtJs设置GridPanel表格文本垂直居中示例

    ExtJs设置GridPanel表格文本垂直居中示例

    业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

  • ExtJS 配置和表格控件使用第1/2页

    ExtJS 配置和表格控件使用第1/2页

    ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

  • ExtJS4 表格的嵌套 rowExpander应用

    ExtJS4 表格的嵌套 rowExpander应用

    今天做一个grid,里面的数据需要带明细,思来想去还是搞个表格嵌套吧!看下图 对于grid中每一条记录点击左边的+号能展开一个明细的子表格 所有数据包括列名均从后台获得,子表格的数据暂时在本地以做测试 在此贴一些代码留下记录 复制代码 代码如下: function displayInnerGrid(renderId) { //Model for the inside grid store Ext.define('TestModel', { extend: 'Ext.data.Model', fi

  • React Ant Design树形表格的复杂增删改操作

    最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.

  • iview-table组件嵌套input select数据无法双向绑定解决

    iview-table组件嵌套input select数据无法双向绑定解决

    目录 一.前言 二.问题描述 三.解决办法 1.基础数据表格 2.树形数据表格 四.后记 一.前言 本篇主要介绍关于iview-ui组件库中的table表格组件嵌套input组件,数据无法及时更新问题的解决办法. 二.问题描述 在我们开发的过程中,经常会遇到需要在表格内操作数据的情况,但是在vue2中,双向绑定的值必须是在data中声明的变量,然而我们在table中展示的每一行数据,通常都是使用的scope中的row去获取的当前行数据,但是row却并没有在data中声明,这样就出现了,无法实现数

  • 怎样才能使大网站规范

    asp开发规范 一.单页编写规范: 切记页面要分模块来写: 第一模块:接收参数.[有可能从不同页面提交到同一个页面:也可能出现两个表单项以哪个优先的处理). 第二模块:定义全局变量. 第三模块:写处理代码(尽量将代码都包含到函数中,详见页面附注一).--到此asp代码主要部分完成. 第四模块:纯html代码,利用储存在全局变量中的值来生成页面. 第五(注意):要在页面头部写清页面逻辑.(如何接收.处理.) 优点:便于维护.模块独立,便于重复使用到类似页面. 二.全站文件构建规范: 1.工程接手后

  • DIV+CSS布局的网站对网站SEO的影响分析

    符合XHTML标准DIV+CSS布局的网站,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处. 表格的嵌套问题 很多SEOer在其文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全

  • 网页美工制作规范

    1,    允许全文检索的页面,为了使Internet 上的搜索引擎能够有效检索,在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记,制作页面是不要忘记添加客户网站的关键字.尤其是通用网址的页面,一定要加关键字-!这样便于推广-! 范例: <meta name="DESCRIPTION" content="提供域名注册,服务器主机空间,网站设计制作建设,电子商务系统开发,软件开发等&q

  • Android开发-之五大布局详解

    Android开发-之五大布局详解

    在html中大家都知道布局是什么意思了,简单来说就是将页面划分模块,比如html中的div.table等.那么Android中也是这样的.Android五大布局让界面更加美化,开发起来也更加方便.当然布局方式不一样应用的地方也不一样,当然了有的布局方式也是可以相互转换和嵌套使用的.它们都各有各的优缺点,具体页面要怎么布局还是得看开发需求,但是用的最多的还是相对布局.线性布局以及相对布局和线性布局的嵌套使用.当然,我说的是安卓,并没有指定是安卓手机,比如平板.智能家居(电视...)很多都是Andr

  • 比较详细的DIV+CSS布局网页对网站SEO的影响

    SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量

  • Vue循环中多个input绑定指定v-model实例

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框

  • 10分钟了解Vue3递归组件的用法

    10分钟了解Vue3递归组件的用法

    目录 前言 用法讲解 什么是递归? 什么是递归组件? 递归组件在哪会用到? 上手实操 1.创建组件 2.全局注册组件 3.获取导航数据 4.设置递归边界,并渲染数据 完整代码 总结 前言 在日常 Vue 项目中,大概率会用组件库辅助开发,所以 递归组件 的出镜率可能不会非常高.但这并不代表 递归组件 不重要. 本文用10分钟左右的时间让你掌握 递归组件 的用法. 在此之前,你必须掌握:html + css + js + Vue3 基础用法,至少需要知道 Vue 组件 是什么. 用法讲解 在讲解

随机推荐