Extjs 4 nested grid or sub grid demo

Source: Internet
Author: User

Zookeeper

Extjs 4 nest grid or sub grid demo

The plug-in rowexpander is used for grid Nesting. This plug-in is available in ext4.2.2.1144.

Implementation focus

1. nest grid cannot respond to many events. Otherwise, an exception will occur and enter the getHeaderIndex: function (header) function ).

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

Ii. added the menuDisabled: true, resizable: false attribute when column is defined to prevent some interface appearances that do not seem to conform to common sense.

Subgrid. js

IE7 or above

Ext.define('Company', {    extend: 'Ext.data.Model',    fields: [            { name: 'id' },            { name: 'company' },            { name: 'price', type: 'float' },            { name: 'change', type: 'float' },            { name: 'pctChange', type: 'float' },            { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },            { name: 'industry' },            { name: 'desc' }         ]});var dummyDataForMainGrid = [        ['1', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],        ['2', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],        ['3', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],        ['4', 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance']    ];var mainStore = Ext.create('Ext.data.ArrayStore', {    model: 'Company',    data: dummyDataForMainGrid});Ext.define('NestGridPanel', {    extend: 'Ext.grid.Panel',    store: mainStore,    columns: [            {xtype: 'rownumberer'},            { text: "Company", flex: 1, dataIndex: 'company' },            { text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },            { text: "Change", dataIndex: 'change' },            { text: "% Change", dataIndex: 'pctChange' },            { text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }        ],    autoWidth: true,    selModel: {        selType: 'rowmodel'    },    height:400,    plugins: [{        ptype: 'rowexpander',        rowBodyTpl: [                '<div  class="detailData">',                '</div>'            ]    }],    collapsible: true,    animCollapse: false,    title: 'Expander Rows in a Collapsable Grid',    iconCls: 'icon-grid',    rowLines : false,    initComponent: function () {        var me = this;        this.callParent(arguments);        me.getView().on('expandBody', me.onExpandNestedGrid,me);    },    onExpandNestedGrid : function (rowNode, record, expandRow, eOpts) {    var grid = Ext.getCmp(rowNode.id + "-grid");    if(!grid){    var detailData = Ext.DomQuery.select("div.detailData", expandRow);            //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 = [                ['dummyRow1', 1, 2],                ['dummyRow2', 1, 2],                ['dummyRow3', 1, 3]            ];            var insideGridStore = Ext.create('Ext.data.ArrayStore', {                model: 'TestModel',                data: dummyDataForInsideGrid            });            var innerGrid = Ext.create('Ext.grid.Panel', {            id : rowNode.id + "-grid",                store: insideGridStore,                columns: [                    {xtype: 'rownumberer'},                    { text: "Column1", dataIndex: 'Field1' ,menuDisabled : true,resizable:false},                    { text: "Column2", dataIndex: 'Field2' ,menuDisabled : true,resizable:false},                    { text: "Column3", dataIndex: 'Field3' ,menuDisabled : true,resizable:false}                ],                columnLines: false,                autoWidth: true,                autoHeight: true,                frame: false,                iconCls: 'icon-grid',                renderTo: detailData[0],                preventHeader: true            });            innerGrid.getEl().swallowEvent([                        'mousedown', 'mouseup', 'click',                        'contextmenu', 'mouseover', 'mouseout',                        'dblclick', 'mousemove'                    ]);}    }});Ext.onReady(function () {    Ext.QuickTips.init();    Ext.BLANK_IMAGE_URL = '/images/s.gif';    var mainGrid = Ext.create('NestGridPanel');    mainGrid.render(Ext.getBody());});


IE7

Ext.define('Company', {    extend: 'Ext.data.Model',    fields: [            { name: 'id' },            { name: 'company' },            { name: 'price', type: 'float' },            { name: 'change', type: 'float' },            { name: 'pctChange', type: 'float' },            { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },            { name: 'industry' },            { name: 'desc' }         ]});var dummyDataForMainGrid = [        ['1', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],        ['2', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],        ['3', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],        ['4', 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance']    ];var mainStore = Ext.create('Ext.data.ArrayStore', {    model: 'Company',    data: dummyDataForMainGrid});Ext.define('NestGridPanel', {    extend: 'Ext.grid.Panel',    store: mainStore,    columns: [            {xtype: 'rownumberer'},            { text: "Company", flex: 1, dataIndex: 'company' },            { text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },            { text: "Change", dataIndex: 'change' },            { text: "% Change", dataIndex: 'pctChange' },            { text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }        ],    autoWidth: true,    selModel: {        selType: 'rowmodel'    },    height:400,    plugins: [{        ptype: 'rowexpander',        rowBodyTpl: [                '<div  class="detailData">',                '</div>'            ]    }],    collapsible: true,    animCollapse: false,    title: 'Expander Rows in a Collapsable Grid',    iconCls: 'icon-grid',    rowLines : false,    initComponent: function () {        var me = this;        this.callParent(arguments);        me.getView().on('expandBody', me.onExpandNestedGrid,me);        me.getView().on('collapsebody', me.onCollapseNestedGrid,me);    },    onExpandNestedGrid : function (rowNode, record, expandRow, eOpts) {    var detailData = Ext.DomQuery.select("div.detailData", expandRow);            //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 = [                ['dummyRow1', 1, 2],                ['dummyRow2', 1, 2],                ['dummyRow3', 1, 3]            ];            var insideGridStore = Ext.create('Ext.data.ArrayStore', {                model: 'TestModel',                data: dummyDataForInsideGrid            });            var innerGrid = Ext.create('Ext.grid.Panel', {                store: insideGridStore,                columns: [                    {xtype: 'rownumberer'},                    { text: "Column1", dataIndex: 'Field1' ,menuDisabled : true,resizable:false},                    { text: "Column2", dataIndex: 'Field2' ,menuDisabled : true,resizable:false},                    { text: "Column3", dataIndex: 'Field3' ,menuDisabled : true,resizable:false}                ],                columnLines: false,                autoWidth: true,                autoHeight: true,                frame: false,                iconCls: 'icon-grid',                renderTo: detailData[0],                preventHeader: true            });            innerGrid.getEl().swallowEvent([                        'mousedown', 'mouseup', 'click',                        'contextmenu', 'mouseover', 'mouseout',                        'dblclick', 'mousemove'                    ]);    },    onCollapseNestedGrid : function (rowNode, record, expandRow, eOpts) {    var detailData = Ext.DomQuery.select("div.detailData", expandRow);    var parent = detailData[0];        var child = parent.firstChild;        while (child) {            child.parentNode.removeChild(child);            child = child.nextSibling;        }    }});Ext.onReady(function () {    Ext.QuickTips.init();    Ext.BLANK_IMAGE_URL = '/images/s.gif';    var mainGrid = Ext.create('NestGridPanel');    mainGrid.render(Ext.getBody());});

Subgrid.html

<!DOCTYPE html>


Refer:

Http://blog.csdn.net/trassion/article/details/10938069


Zookeeper

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.