如何同步組合框和文本框值。即如何加載不同的值從文本字段上存儲，而我改變組合框上的值

Question

我是EXTjs（也包括Stackoverflow）的新手。我在這個問題上苦苦掙扎，最後決定尋求幫助。我的問題是「如何同步組合框和文本框的值，即如何在文本框中加載不同的'store'值，而我正在改變組合框的值？」我的問題是，當我加載組合框的值，並選擇它們時，我的文本字段始終保持空白。我試過「Ext.getCmp（）。setValue（）;」它可以正常工作，但是如果我有100個文本框，我認爲這不是最好的選擇。我希望combobox和textfield以某種方式與商店同步。任何幫助表示讚賞。形勢圖片是在下面的鏈接：

pic one

pic two

而且我的代碼：

我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 
      } 

      ] 

     }); 
    } 
}); 

我的看法RightPanel：

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); 
    } 
}); 

Answer 1

您想要查看組合框上的更改，然後根據其新值執行更改。

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' 
    }]