动态创建gridpanel

最新推荐文章于 2019-04-19 14:33:26 发布

LZG0321

最新推荐文章于 2019-04-19 14:33:26 发布

阅读量736

点赞数

分类专栏： EXT 文章标签： stylesheet header function html div

本文链接：https://blog.csdn.net/lzg0321/article/details/7374569

版权

EXT 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
        <script type="text/javascript" src="../../ext-all.js"> </script>
        <script type="text/javascript">
            Ext.onReady(function() {
                var dataJson = {
                    cm: [{ header: '编号', dataIndex: 'id' },
                        { header: '名称', dataIndex: 'name' },
                        { header: '描述', dataIndex: 'descn' }],
                    data: [['1', 'name1', 'descn1'],
                        ['2', 'name2', 'descn2'],
                        ['3', 'name3', 'descn3'],
                        ['4', 'name4', 'descn4'],
                        ['5', 'name5', 'descn5']]
                };//后台需要返回的数据


                //开始动态创建
                var cm = new Ext.grid.ColumnModel(dataJson.cm);
                var data = dataJson.data;
                var field = [];
                Ext.each(dataJson.cm, function(item) {
                    field.push({ name: item.dataIndex });
                });
                var store = new Ext.data.Store({
                    proxy: new Ext.data.MemoryProxy(data),
                    reader: new Ext.data.ArrayReader({ }, field)
                });
                store.load();
                var grid = new Ext.grid.GridPanel({
                    autoHeight: true,
                    renderTo: 'grid',
                    store: store,
                    cm: cm
                });

            });
        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>