如何同步组合框和文本字段值。即如何从存储在文本字段中加载不同的值，而我正在更改组合框上的值

Posted 2023-02-26

【中文标题】如何同步组合框和文本字段值。即如何从存储在文本字段中加载不同的值，而我正在更改组合框上的值

【英文标题】：How to sync combobox and textfield value. i.e how to load different values from store on textfield,while I am changing values on combobox

【发布时间】：2012-07-31 06:26:02

【问题描述】：

我是 EXTjs 的新手（也是 *** 的新手）。我一直在努力解决这个问题，最后决定寻求帮助。我的问题是“如何同步组合框和文本字段的值。即如何从文本字段的“存储”加载不同的值，而我正在更改组合框的值？“我的问题是，当我在组合框上加载值并选择它们时，我的文本字段一直为空。我试过“Ext.getCmp().setValue();”它适用于此，但我认为如果我有 100 个文本字段，这不是最佳选择。我希望组合框和文本字段以某种方式与商店同步。任何帮助表示赞赏。图片中的情况在下面的链接中：

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

【参考方案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'
    ]