Ext JS - 如何在新的 window 中从网格填充文本字段
Ext JS - How to populate textfields from a grid in a new window
因为我是 Ext JS 和 Sencha Architect 的新手,所以我在这里很挣扎:(
我有一个网格,其中显示了两列 ID 和名称,如下所示
ID | Name
1000 CA
1001 TX
1002 VA
有两个按钮添加和更新。
网格代码如下:
items: [
{
xtype: 'panel',
scrollable: true,
title: 'Plant',
dockedItems: [
{
xtype: 'gridpanel',
buttons: [
{
text: 'Add Plant',
handler: function() {
});
}
},
{
text: 'Update Plant',
handler: function() {
Ext.create('XYZ.view.UpdatePlantWindow', {
title: 'Update Plant'});}
}
],
buttonAlign: 'center',
dock: 'top',
id: 'PlantGrid',
scrollable: true,
store: 'PlantStoreAdmin',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID_PLANT',
text: 'Plant ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'DS_PLANT',
text: 'Plant Name',
flex: 1
},
现在,当用户选择任意行并单击“更新”按钮时,新的 window 打开,其中有两个文本字段 ID 和名称。我想用用户在网格中选择的适当值填充这两个字段。
windows代码:
Ext.define('XYZ.view.UpdatePlantWindow', {
extend: 'Ext.window.Window',
alias: 'widget.updateplantwindow',
requires: [
'Cepheid.view.UpdatePlantWindowViewModel',
'Ext.container.Container',
'Ext.form.field.Text'
],
viewModel: {
type: 'updateplantwindow'
},
autoShow: true,
height: 250,
width: 400,
title: 'Update Plant',
items: [
{
xtype: 'container'
},
{
xtype: 'textfield',
disabled: true,
id: 'PlantIDUpdate',
fieldLabel: 'Plant ID'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
id: 'PlantNameUpdate'
}
]
});
现在如何使用适当的值填充两个文本字段?
提前致谢!
您可以使用 SelectionModel
获取网格中当前选定的记录。即:
var selection = myGrid.getSelectionModel().getSelection();
我建议将 window 中的字段包装在 form
中,因为这样您就可以使用 loadRecord
方法将选择值推送到 form
.
即
myWindow.down('form').getForm().loadRecord(selection[0]);
否则,如果您不想在表格中换行,您可以在 window 上加载每个单独的值:
myWindow.down('#myField').setValue(selection[0].get('my_value'));
因为我是 Ext JS 和 Sencha Architect 的新手,所以我在这里很挣扎:(
我有一个网格,其中显示了两列 ID 和名称,如下所示
ID | Name
1000 CA
1001 TX
1002 VA
有两个按钮添加和更新。
网格代码如下:
items: [
{
xtype: 'panel',
scrollable: true,
title: 'Plant',
dockedItems: [
{
xtype: 'gridpanel',
buttons: [
{
text: 'Add Plant',
handler: function() {
});
}
},
{
text: 'Update Plant',
handler: function() {
Ext.create('XYZ.view.UpdatePlantWindow', {
title: 'Update Plant'});}
}
],
buttonAlign: 'center',
dock: 'top',
id: 'PlantGrid',
scrollable: true,
store: 'PlantStoreAdmin',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID_PLANT',
text: 'Plant ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'DS_PLANT',
text: 'Plant Name',
flex: 1
},
现在,当用户选择任意行并单击“更新”按钮时,新的 window 打开,其中有两个文本字段 ID 和名称。我想用用户在网格中选择的适当值填充这两个字段。
windows代码:
Ext.define('XYZ.view.UpdatePlantWindow', {
extend: 'Ext.window.Window',
alias: 'widget.updateplantwindow',
requires: [
'Cepheid.view.UpdatePlantWindowViewModel',
'Ext.container.Container',
'Ext.form.field.Text'
],
viewModel: {
type: 'updateplantwindow'
},
autoShow: true,
height: 250,
width: 400,
title: 'Update Plant',
items: [
{
xtype: 'container'
},
{
xtype: 'textfield',
disabled: true,
id: 'PlantIDUpdate',
fieldLabel: 'Plant ID'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
id: 'PlantNameUpdate'
}
]
});
现在如何使用适当的值填充两个文本字段?
提前致谢!
您可以使用 SelectionModel
获取网格中当前选定的记录。即:
var selection = myGrid.getSelectionModel().getSelection();
我建议将 window 中的字段包装在 form
中,因为这样您就可以使用 loadRecord
方法将选择值推送到 form
.
即
myWindow.down('form').getForm().loadRecord(selection[0]);
否则,如果您不想在表格中换行,您可以在 window 上加载每个单独的值:
myWindow.down('#myField').setValue(selection[0].get('my_value'));