Model view controller 如何同步组合框和文本字段值。i、 e如何在更改combobox上的值时从存储在textfield中加载不同的值

我不熟悉EXTjs（也不熟悉Stackoverflow）。我一直在努力解决这个问题，最后决定寻求帮助。我的问题是“如何同步combobox和textfield的值。即，当我更改combobox上的值时，如何从textfield上的“存储”加载不同的值？”我的问题是，当我在combobox上加载值并选择它们时，我的textfield始终保持为空。我尝试了“Ext.getCmp（）.setValue（）；”，但我认为如果我有100个文本字段，这不是最好的选择。我希望combobox和textfield以某种方式与store同步。感谢您的帮助。图片中的情况见以下链接：

我的代码是：

My app.js:

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({

    name: 'work',

    appFolder: 'app',


    controllers: ['Work'],



    launch: function() {


        Ext.create('Ext.container.Viewport', {
            //layout: 'fit',
            items: [{
                xtype: 'rightpanel' // gets it from view class
            }

            ]

        });
    }
});

Ext.define('work.view.works.RightPanel', {
    extend: 'Ext.panel.Panel',
    ALIAS: 'widget.rightpanel',
    width: 300,
    title: 'Building navigation',
    animCollapse: true,
    collapsible: true,
    split: true,
    minSize: 400,
    maxSize: 400,
    margins: '0 5 0 0',
    //activeTab:1, tabPosition:'bottom',
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combobox',
                fieldLabel: 'BuildingID',
                queryMode: 'local',
                name: 'Bid',
                displayField: 'Bid',
                valueField: 'Bid',
                id: 'Bid',
                MODE: 'remote',
                store: 'Work'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Address',
                name: 'Address',
                displayField: 'Address',
                valueField: 'Address',
                id: 'Address',
                store: 'Work'
            }]
        }];

        this.columns = [{
            header: 'ID',
            dataIndex: 'Bid',
            flex: 1
        }, {
            header: 'Texts',
            dataIndex: 'Address',
            flex: 1
        }];

        this.callParent(arguments);

    }
});

Ext.define('work.store.Work', {
    extend: 'Ext.data.Store',

    model: 'work.model.Work',
    storeId: 'workstore',
    id: 'workstore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        limitParam: undefined,
        startParam: undefined,
        paramName: undefined,
        pageParam: undefined,
        noCache: false,

        api: {
            read: 'data/showWork.php' // just a .php file that reads values from database and shows them on combobox
        },

        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },

        writer: {
            type: 'json',
            root: 'data',
            encode: true
        }

    }
});

Ext.define('work.model.Work', {
    extend: 'Ext.data.Model',
    //idProperty: 'WorkID',   
    fields: [{
        name: 'Bid',
        type: 'int'
    }, 'Address']
});

我的视图右侧面板：

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({

    name: 'work',

    appFolder: 'app',


    controllers: ['Work'],



    launch: function() {


        Ext.create('Ext.container.Viewport', {
            //layout: 'fit',
            items: [{
                xtype: 'rightpanel' // gets it from view class
            }

            ]

        });
    }
});

Ext.define('work.view.works.RightPanel', {
    extend: 'Ext.panel.Panel',
    ALIAS: 'widget.rightpanel',
    width: 300,
    title: 'Building navigation',
    animCollapse: true,
    collapsible: true,
    split: true,
    minSize: 400,
    maxSize: 400,
    margins: '0 5 0 0',
    //activeTab:1, tabPosition:'bottom',
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combobox',
                fieldLabel: 'BuildingID',
                queryMode: 'local',
                name: 'Bid',
                displayField: 'Bid',
                valueField: 'Bid',
                id: 'Bid',
                MODE: 'remote',
                store: 'Work'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Address',
                name: 'Address',
                displayField: 'Address',
                valueField: 'Address',
                id: 'Address',
                store: 'Work'
            }]
        }];

        this.columns = [{
            header: 'ID',
            dataIndex: 'Bid',
            flex: 1
        }, {
            header: 'Texts',
            dataIndex: 'Address',
            flex: 1
        }];

        this.callParent(arguments);

    }
});

Ext.define('work.store.Work', {
    extend: 'Ext.data.Store',

    model: 'work.model.Work',
    storeId: 'workstore',
    id: 'workstore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        limitParam: undefined,
        startParam: undefined,
        paramName: undefined,
        pageParam: undefined,
        noCache: false,

        api: {
            read: 'data/showWork.php' // just a .php file that reads values from database and shows them on combobox
        },

        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },

        writer: {
            type: 'json',
            root: 'data',
            encode: true
        }

    }
});

Ext.define('work.model.Work', {
    extend: 'Ext.data.Model',
    //idProperty: 'WorkID',   
    fields: [{
        name: 'Bid',
        type: 'int'
    }, 'Address']
});

我的店铺：

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({

    name: 'work',

    appFolder: 'app',


    controllers: ['Work'],



    launch: function() {


        Ext.create('Ext.container.Viewport', {
            //layout: 'fit',
            items: [{
                xtype: 'rightpanel' // gets it from view class
            }

            ]

        });
    }
});

Ext.define('work.view.works.RightPanel', {
    extend: 'Ext.panel.Panel',
    ALIAS: 'widget.rightpanel',
    width: 300,
    title: 'Building navigation',
    animCollapse: true,
    collapsible: true,
    split: true,
    minSize: 400,
    maxSize: 400,
    margins: '0 5 0 0',
    //activeTab:1, tabPosition:'bottom',
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combobox',
                fieldLabel: 'BuildingID',
                queryMode: 'local',
                name: 'Bid',
                displayField: 'Bid',
                valueField: 'Bid',
                id: 'Bid',
                MODE: 'remote',
                store: 'Work'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Address',
                name: 'Address',
                displayField: 'Address',
                valueField: 'Address',
                id: 'Address',
                store: 'Work'
            }]
        }];

        this.columns = [{
            header: 'ID',
            dataIndex: 'Bid',
            flex: 1
        }, {
            header: 'Texts',
            dataIndex: 'Address',
            flex: 1
        }];

        this.callParent(arguments);

    }
});

Ext.define('work.store.Work', {
    extend: 'Ext.data.Store',

    model: 'work.model.Work',
    storeId: 'workstore',
    id: 'workstore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        limitParam: undefined,
        startParam: undefined,
        paramName: undefined,
        pageParam: undefined,
        noCache: false,

        api: {
            read: 'data/showWork.php' // just a .php file that reads values from database and shows them on combobox
        },

        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },

        writer: {
            type: 'json',
            root: 'data',
            encode: true
        }

    }
});

Ext.define('work.model.Work', {
    extend: 'Ext.data.Model',
    //idProperty: 'WorkID',   
    fields: [{
        name: 'Bid',
        type: 'int'
    }, 'Address']
});

我的模型类：

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({

    name: 'work',

    appFolder: 'app',


    controllers: ['Work'],



    launch: function() {


        Ext.create('Ext.container.Viewport', {
            //layout: 'fit',
            items: [{
                xtype: 'rightpanel' // gets it from view class
            }

            ]

        });
    }
});

Ext.define('work.view.works.RightPanel', {
    extend: 'Ext.panel.Panel',
    ALIAS: 'widget.rightpanel',
    width: 300,
    title: 'Building navigation',
    animCollapse: true,
    collapsible: true,
    split: true,
    minSize: 400,
    maxSize: 400,
    margins: '0 5 0 0',
    //activeTab:1, tabPosition:'bottom',
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combobox',
                fieldLabel: 'BuildingID',
                queryMode: 'local',
                name: 'Bid',
                displayField: 'Bid',
                valueField: 'Bid',
                id: 'Bid',
                MODE: 'remote',
                store: 'Work'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Address',
                name: 'Address',
                displayField: 'Address',
                valueField: 'Address',
                id: 'Address',
                store: 'Work'
            }]
        }];

        this.columns = [{
            header: 'ID',
            dataIndex: 'Bid',
            flex: 1
        }, {
            header: 'Texts',
            dataIndex: 'Address',
            flex: 1
        }];

        this.callParent(arguments);

    }
});

Ext.define('work.store.Work', {
    extend: 'Ext.data.Store',

    model: 'work.model.Work',
    storeId: 'workstore',
    id: 'workstore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        limitParam: undefined,
        startParam: undefined,
        paramName: undefined,
        pageParam: undefined,
        noCache: false,

        api: {
            read: 'data/showWork.php' // just a .php file that reads values from database and shows them on combobox
        },

        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },

        writer: {
            type: 'json',
            root: 'data',
            encode: true
        }

    }
});

Ext.define('work.model.Work', {
    extend: 'Ext.data.Model',
    //idProperty: 'WorkID',   
    fields: [{
        name: 'Bid',
        type: 'int'
    }, 'Address']
});

我的控制器：

 Ext.define('work.controller.Work', {
   extend: 'Ext.app.Controller',

   stores: ['Work'],
   models: ['Work'],

   views: [
       'works.RightPanel' // name comes from view class
   ],

   init: function() {
       console.log('Done');
       this.control({
           'viewport > rightpanel': {
               render: this.test
           },
           'rightpanel combobox[id=Bid]': {
               select: this.change
           }
       });
   },

   change: function(buttons) {
       var values = this.getStore('Work').collect('Address', 'Address', false);
       var win = buttons.up('rightpanel'); //  gets the needed widget
       var form = win.down('combobox'); // gets the needed form
       var value = form.getValue(); // gets the value
       console.log("value " + value);
   }
});

---

您希望观察组合框上的更改，然后根据其新值对更改进行操作

this.items = [{
    xtype: 'form',
    items: [{
        xtype: 'combobox',
        fieldLabel: 'BuildingID',
        queryMode: 'local',
        name: 'Bid',
        displayField: 'Bid',
        valueField: 'Bid',
        id: 'Bid',
        mode: 'remote',
        store: 'Work'
        listeners::{
            change:function(cbx, newVal,oldVal,e){
                var record  = cbx.getStore().find("Bid",newVal); // theres prolly a better way to find this, such as to find the active record of the cbx
                Ext.getCmp('Address').setValue(record.getValue("Address"))

            }

        }

    },{
        xtype: 'textfield',
        fieldLabel: 'Address',
        name: 'Address',
        displayField: 'Address',
        valueField: 'Address',
        id: 'Address',
        store: 'Work'
    }]