ExtJs实现grid属性动态修改

在使用 ExtJs 构建 Web 应用程序时，经常需要对 grid 进行一些属性的修改。本文将介绍如何动态地改变 grid 中的属性，包括 data、定义变量、保存固定项目以及增加动态项目。

1. 实现 data 的方法代码

要想动态地改变 grid 中的数据，我们需要首先了解如何实现 data 的方法代码。在 ExtJs 中，我们可以使用 store 来管理数据，然后通过 grid 绑定 store，实现数据的展示。因此，我们只需要动态地修改 store 中的数据，就可以实现 grid 属性的动态修改。

下面是一个示例代码，用于实现动态修改 store 中的数据：

```

var store ('', {

fields: ['name', 'email', 'phone'],

data: [{

name: 'Lisa',

email: 'lisa@',

phone: '555-111-1224'

}, {

name: 'Bart',

email: 'bart@',

phone: '555-222-1234'

}]

});

store.loadData([{

name: 'Homer',

email: 'homer@',

phone: '555-222-1244'

}, {

name: 'Marge',

email: 'marge@',

phone: '555-222-1254'

}]);

```

上述代码中，我们首先创建了一个名为 store 的数据仓库，其中包含了三个字段：name、email 和 phone。接着，我们通过 loadData 方法动态地向 store 中添加了两条数据。

2. 实现定义变量的方法代码

有时候，我们需要在 grid 中自定义一些变量来实现特定的功能，比如设置行高、隐藏某些列等。下面是一个示例代码，用于实现定义变量的方法：

```

('MyGrid', {

extend: '',

rowHeight: 40,

columns: [{

text: 'Name',

dataIndex: 'name',

flex: 1

}, {

text: 'Email',

dataIndex: 'email',

flex: 1

}, {

text: 'Phone',

dataIndex: 'phone',

flex: 1

}],

initComponent: function() {

var me this;

(arguments);

[0].hidden true;

}

});

var myGrid ('MyGrid', {

renderTo: (),

store: store

});

```

上述代码中，我们首先定义了一个名为 MyGrid 的类，该类继承自 。在该类中，我们定义了一个名为 rowHeight 的变量，用于设置行高。接着，我们定义了三列数据，并且在 initComponent 方法中将第一列设置为隐藏状态。

最后，我们通过 方法创建了一个名为 myGrid 的对象，并将其渲染到页面上。

3. 实现保存固定项目的方法代码

有时候，我们需要将 grid 中的某些项目保存下来，方便下次使用。下面是一个示例代码，用于实现保存固定项目的方法：

```

var fixedColumns [{

text: 'Name',

dataIndex: 'name',

width: 150

}, {

text: 'Email',

dataIndex: 'email',

width: 200

}];

var dynamicColumns [{

text: 'Phone',

dataIndex: 'phone',

flex: 1

}];

var columns (dynamicColumns);

var grid ('', {

columns: columns,

store: store,

width: 550,

height: 250,

renderTo: ()

});

var saveBtn ('Ext.Button', {

text: 'Save Columns',

handler: function() {

('fixedColumns', Ext.JSON.encode(fixedColumns));

}

});

(());

```

上述代码中，我们首先定义了两个数组：fixedColumns 和 dynamicColumns，分别用于保存固定的列和动态的列。接着，我们将这两个数组合并成一个新的数组 columns，并将其作为参数传递给 类，完成 grid 的创建。

最后，我们创建了一个名为 saveBtn 的按钮，并将其保存到本地存储中。这样，在下次使用该页面时，我们就可以直接加载保存的固定项目，而无需重新定义。

4. 实现在固定项目的基础上增加动态项目的方法代码

除了保存固定项目外，有时候我们还需要在固定项目的基础上增加一些动态项目。下面是一个示例代码，用于实现在固定项目的基础上增加动态项目的方法：

```

var addBtn ('Ext.Button', {

text: 'Add Column',

handler: function() {

var newColumn {

text: 'New Column',

dataIndex: 'newDataIndex',

flex: 1

};

(, newColumn);

().refresh();

}

});

(());

```

上述代码中，我们创建了一个名为 addBtn 的按钮，并在其单击事件中动态地添加了一列新数据。具体来说，我们定义了一个名为 newColumn 的新列，并将其插入到当前列的末尾位置。最后，我们调用 getView().refresh() 方法刷新 grid，使得新增的列能够正常显示。

总之，通过上述四种方法，我们可以轻松地实现 ExtJs 中 grid 属性的动态修改，从而提升 Web 应用程序的灵活性和交互性。