Extjs 4 nest grid or sub grid demo

Extjs 4 nest grid or sub grid demo

grid的嵌套用到插件rowexpander，ext4.2.2.1144版本官方有这个插件。

实现重点

一：nest grid不能响应很多事件，否则会发生异常进入到函数 getHeaderIndex: function (header) 。

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

二：column定义时增加属性 menuDisabled : true,resizable:false，防止一些看起来不符合常理界面表现。

subgrid.js

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‘,
    //renderTo: Ext.getBody()
    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>
<html>
<head>
<title>nest grid</title>

	    
	    <meta http-equiv="description" content="no-cache">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

	    
	    
		<link rel="stylesheet" type="text/css" href="./Ext/resources/css/ext-all-neptune-debug.css">

		

                <script type="text/javascript" src="./Ext/ext-all-debug.js"></script>
		<script type="text/javascript" src="./Ext/ext-theme-neptune.js"></script>	
		
        	<script type="text/javascript" src="./subgrid.js"></script>
</head>

<body>

</body>
</html>

参考：

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

Extjs 4 nest grid or sub grid demo

原文：http://blog.csdn.net/helloworlddream/article/details/19043889