Ext 4 Grid 和 Form 相互绑定并更新 Store 更新行
时间: 2024-06-08 21:12:15 浏览: 16
在 Ext 4 中,可以通过使用 `bind` 方法将 Grid 和 Form 绑定在一起,并且在表单中进行更改时自动更新绑定的 Store 中的行。
首先,在 Grid 中创建一个 Store:
```javascript
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'email'],
data: [
{id: 1, name: 'John', email: 'john@example.com'},
{id: 2, name: 'Jane', email: 'jane@example.com'}
]
});
```
接下来,创建一个 Grid:
```javascript
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: 'ID', dataIndex: 'id'},
{text: 'Name', dataIndex: 'name'},
{text: 'Email', dataIndex: 'email'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
```
然后,创建一个 Form:
```javascript
var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
width: 350,
height: 250,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email'
}]
});
```
最后,在 Grid 和 Form 中使用 `bind` 方法将它们绑定在一起:
```javascript
grid.getSelectionModel().on('selectionchange', function(selModel, selections) {
form.getForm().bindRecord(selections[0]);
});
```
现在,当用户在 Grid 中选择一行时,表单将自动更新为该行的值,并且在表单中进行更改时,该行将自动更新到绑定的 Store 中。
```javascript
form.getForm().on('update', function(form, record) {
record.commit();
});
```
注意,当在表单中进行更改时,必须在表单的 `update` 事件中手动调用 `commit()` 方法才能将更改保存到 Store 中。