1

私はEXTjs（およびStackoverflowも）が初めてです。私はこの問題に苦しんでいて、ついに助けを求めることにしました.私の質問は、「コンボボックスとテキストフィールドの値を同期する方法です。つまり、コンボボックスの値を変更しているときに、テキストフィールドの「ストア」から異なる値をロードする方法は?」問題は、コンボボックスに値をロードして選択している間、テキストフィールドが常に空のままであることです。「Ext.getCmp().setValue();」を試してみました これで問題なく動作しますが、テキストフィールドが 100 個ある場合は最適なオプションではないと思います。コンボボックスとテキストフィールドを何らかの形でストアと同期させたい。どんな助けでも大歓迎です。写真の状況は以下のリンクにあります。

写真1

写真2

そして私のコード：

私の 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);
   }
});
4

1 に答える 1

0

コンボボックスの変更を監視してから、新しい値に基づいて変更を実行します。

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'
    }]
于 2012-08-01T08:22:30.183 に答える