ExtJs實(shí)現(xiàn)grid屬性動(dòng)態(tài)修改
在使用 ExtJs 構(gòu)建 Web 應(yīng)用程序時(shí)，經(jīng)常需要對(duì) grid 進(jìn)行一些屬性的修改。本文將介紹如何動(dòng)態(tài)地改變 grid 中的屬性，包括 data、定義變量、保存固定項(xiàng)目以及增加動(dòng)態(tài)項(xiàng)目。1. 實(shí)現(xiàn)
在使用 ExtJs 構(gòu)建 Web 應(yīng)用程序時(shí)，經(jīng)常需要對(duì) grid 進(jìn)行一些屬性的修改。本文將介紹如何動(dòng)態(tài)地改變 grid 中的屬性，包括 data、定義變量、保存固定項(xiàng)目以及增加動(dòng)態(tài)項(xiàng)目。
1. 實(shí)現(xiàn) data 的方法代碼
要想動(dòng)態(tài)地改變 grid 中的數(shù)據(jù)，我們需要首先了解如何實(shí)現(xiàn) data 的方法代碼。在 ExtJs 中，我們可以使用 store 來(lái)管理數(shù)據(jù)，然后通過(guò) grid 綁定 store，實(shí)現(xiàn)數(shù)據(jù)的展示。因此，我們只需要?jiǎng)討B(tài)地修改 store 中的數(shù)據(jù)，就可以實(shí)現(xiàn) grid 屬性的動(dòng)態(tài)修改。
下面是一個(gè)示例代碼，用于實(shí)現(xiàn)動(dòng)態(tài)修改 store 中的數(shù)據(jù)：
```
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'
}]);
```
上述代碼中，我們首先創(chuàng)建了一個(gè)名為 store 的數(shù)據(jù)倉(cāng)庫(kù)，其中包含了三個(gè)字段：name、email 和 phone。接著，我們通過(guò) loadData 方法動(dòng)態(tài)地向 store 中添加了兩條數(shù)據(jù)。
2. 實(shí)現(xiàn)定義變量的方法代碼
有時(shí)候，我們需要在 grid 中自定義一些變量來(lái)實(shí)現(xiàn)特定的功能，比如設(shè)置行高、隱藏某些列等。下面是一個(gè)示例代碼，用于實(shí)現(xiàn)定義變量的方法：
```
('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
});
```
上述代碼中，我們首先定義了一個(gè)名為 MyGrid 的類，該類繼承自 。在該類中，我們定義了一個(gè)名為 rowHeight 的變量，用于設(shè)置行高。接著，我們定義了三列數(shù)據(jù)，并且在 initComponent 方法中將第一列設(shè)置為隱藏狀態(tài)。
最后，我們通過(guò) 方法創(chuàng)建了一個(gè)名為 myGrid 的對(duì)象，并將其渲染到頁(yè)面上。
3. 實(shí)現(xiàn)保存固定項(xiàng)目的方法代碼
有時(shí)候，我們需要將 grid 中的某些項(xiàng)目保存下來(lái)，方便下次使用。下面是一個(gè)示例代碼，用于實(shí)現(xiàn)保存固定項(xiàng)目的方法：
```
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));
}
});
(());
```
上述代碼中，我們首先定義了兩個(gè)數(shù)組：fixedColumns 和 dynamicColumns，分別用于保存固定的列和動(dòng)態(tài)的列。接著，我們將這兩個(gè)數(shù)組合并成一個(gè)新的數(shù)組 columns，并將其作為參數(shù)傳遞給 類，完成 grid 的創(chuàng)建。
最后，我們創(chuàng)建了一個(gè)名為 saveBtn 的按鈕，并將其保存到本地存儲(chǔ)中。這樣，在下次使用該頁(yè)面時(shí)，我們就可以直接加載保存的固定項(xiàng)目，而無(wú)需重新定義。
4. 實(shí)現(xiàn)在固定項(xiàng)目的基礎(chǔ)上增加動(dòng)態(tài)項(xiàng)目的方法代碼
除了保存固定項(xiàng)目外，有時(shí)候我們還需要在固定項(xiàng)目的基礎(chǔ)上增加一些動(dòng)態(tài)項(xiàng)目。下面是一個(gè)示例代碼，用于實(shí)現(xiàn)在固定項(xiàng)目的基礎(chǔ)上增加動(dòng)態(tài)項(xiàng)目的方法：
```
var addBtn ('Ext.Button', {
text: 'Add Column',
handler: function() {
var newColumn {
text: 'New Column',
dataIndex: 'newDataIndex',
flex: 1
};
(, newColumn);
().refresh();
}
});
(());
```
上述代碼中，我們創(chuàng)建了一個(gè)名為 addBtn 的按鈕，并在其單擊事件中動(dòng)態(tài)地添加了一列新數(shù)據(jù)。具體來(lái)說(shuō)，我們定義了一個(gè)名為 newColumn 的新列，并將其插入到當(dāng)前列的末尾位置。最后，我們調(diào)用 getView().refresh() 方法刷新 grid，使得新增的列能夠正常顯示。
總之，通過(guò)上述四種方法，我們可以輕松地實(shí)現(xiàn) ExtJs 中 grid 屬性的動(dòng)態(tài)修改，從而提升 Web 應(yīng)用程序的靈活性和交互性。