Ext动态加载列

最新推荐文章于 2022-05-17 16:55:55 发布

dodo650038

最新推荐文章于 2022-05-17 16:55:55 发布

阅读量497

点赞数

分类专栏： Ext学习文章标签： ext4 动态加载列

本文链接：https://blog.csdn.net/dodo650038/article/details/48533227

版权

Ext学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前做表格的时候遇到动态加载列，当时由于赶时间，效果没做出来，只能先查数据，再显示表格。今晚百度学习了一下，其实很简单。
动态加载主要是用到grid.reconfigure（[store],[column]）方法。参数store和column都是可选的，根据需要重新加载。调试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello World</title>

    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script> 
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script> 
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/ext-theme-classic/ext-theme-classic-all.css">

    <style type="text/css">
        .bt
        {
            background-color: '#999';
            border:solid 1px #000;  
            font-weight:bold;  
        }
    </style>

<script>
Ext.onReady(function () {

    var cols = [
            {
                text:'aa',
                dataIndex:'name'
            },
            {
                text:'bb',
                dataIndex:'data1'
            }
        ];

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1'],
        data: [
            { 'name': 'metric one',  'data1':14},
            { 'name': 'metric two',  'data1':16},
            { 'name': 'metric three', 'data1':14},
            { 'name': 'metric four',  'data1':6},
            { 'name': 'metric five', 'data1':36}
        ]
    });

  var grid = Ext.create('Ext.grid.Panel',{
      title: '动态添加列',
      renderTo: Ext.getBody(),
      store: store,
      columns: cols,
      tbar:[{
        text:'添加一列',
        listeners:{
            click:function(){
                cols.push({"text":"cc","dataIndex":"data2"});  
                grid.reconfigure(store,cols);
            }
        }
      }],
      plugins:[Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 2,
            autoCancel: false
        })]
    });

});

</script>

</head>
    <body id="docbody">

    </body>
</html>