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