Extjs 4 Grid 嵌套

最新推荐文章于 2023-06-04 22:15:25 发布

ashou706

最新推荐文章于 2023-06-04 22:15:25 发布

阅读量1k

点赞数

分类专栏： Js 文章标签： Extjs 4

本文链接：https://blog.csdn.net/ashou706/article/details/50462492

版权

Js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Extjs

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.tpri.tpri_dmp.config.SystemConfig" %>
<%@ page import="com.tpri.common.util.MenuHelper" %>
<html>
<meta charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<head>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/res/js/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/extjs4/ext-all.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/extjs4/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/extjs4/ux/RowExpander.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/tpri_dmp/DailyWork/Meet/MeetTest.js"></script>
    <%=MenuHelper.getCss()%>
</head>
<body>
<div id="grid1"></div>
<div id="grid2"></div>
</body>
 </html>

/**
 * Created by mjs on 2015/12/30.
 */
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
});

function displayInnerGrid(renderId) {
    alert(renderId);
    //Model for the inside grid store
    Ext.define('TestModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Field1' },
            { name: 'Field2' },
            { name: 'Field3' }
        ]
    });
    var dummyDataForInsideGrid = [];
    //dummy data for the inside grid
    if(renderId==2)
    {
        dummyDataForInsideGrid = [
            ['dummyRow1', 1, 2],
            ['dummyRow2', 1, 2],
            ['dummyRow3', 1, 3]
        ];
    }
    else
    {
        dummyDataForInsideGrid = [
            ['dummyRow21', 21, 2],
            ['dummyRow22', 21, 2],
            ['dummyRow23', 21, 3]
        ];
    }


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

    innerGrid = Ext.create('Ext.grid.Panel', {
        store: insideGridStore,
        selModel: {
            selType: 'cellmodel'
        },
        columns: [
            { text: "Column1", dataIndex: 'Field1' },
            { text: "Column2", dataIndex: 'Field2' },
            { text: "Column3", 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;
    }
}


Ext.define('MainGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.MainGrid',
    store: mainStore,
    columns: [
        { 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: 'cellmodel'
    },
    //autoHeight: true,
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: [
            '<div id="{id}">',
            '</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);
    }
});


Ext.onReady(function () {

    Ext.QuickTips.init();
    Ext.BLANK_IMAGE_URL = '/images/s.gif';

    var mainGrid = new Ext.create('MainGrid');

    mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
        displayInnerGrid(record.get('id'));
    });

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

    mainGrid.render(Ext.getBody());
    mainGrid.setHeight(window.innerHeight);
    mainGrid.setWidth(window.innerWidth);
    Ext.EventManager.onWindowResize(function () {
        //console.log('-------');
        mainGrid.setHeight(window.innerHeight);
        mainGrid.setWidth(window.innerWidth);
    });

});

Extjs 4 Grid 嵌套