0

Ext JS は初めてです。ここでは、Store を使用して ComboBox にデータを入力しようとしています。コンボボックスが表示されましたが、ドロップダウン値はありませんでした。誰かがレビューして、以下のコードの問題点を教えてください。

app.js:-

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


Ext.application({
    name: 'MVCCombo', 
    controllers: ['Skills'],
    autoCreateViewport: true

});

コントローラー(Skills.js):-

Ext.define('MVCCombo.controller.Skills', {
            extend : 'Ext.app.Controller', 
            //define the stores
            stores : ['Skills'],
            //define the models
            models : ['Skill'],
            //define the views
            views : ['combo.Skill'],
            init: function() {
                alert("Controller Invoked");
            }
    });

ストア(Skills.js):-

Ext.define('MVCCombo.store.Skills', {
        extend:'Ext.data.Store', 
        model:'MVCCombo.model.Skill',
        data: [{
            "id": "1",
            "name": "Java"
        }, {
            "id": "2",
            "name": "J2EE"
        }, {
            "id": "3",
            "name": "Ext JS"
        }
        ]
    });

モデル:(Skill.js):-

Ext.define('MVCCombo.model.Skill', {
    extend: 'Ext.data.Model',
    fields: [{name:'id', type:'string'},{name:'name', type:'string'}]
});

View(ViewPort.js):-

Ext.define('MVCCombo.view.Viewport', {
    extend: 'Ext.Viewport',    
    layout: 'fit',
    requires: [
        'MVCCombo.view.combo.Skill'
    ],
    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [                
                {
                    xtype: 'cmbBox'
                }
            ]
        });

        me.callParent(arguments);
    }
});

View(Skill.js):-

Ext.define('MVCCombo.view.combo.Skill' ,{
    extend: 'Ext.form.ComboBox',
    alias : 'widget.cmbBox',    
    allowBlank: false,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name', 
    store: 'Skills' 
});
4

2 に答える 2

0

dbrin が提案したように、私は jsFiddle で簡単なテストを行いました。layoutビューポートのオプションが問題の原因であることを (偶然にも) 発見しました。次の解決策のいずれかを試してください。

  • layoutオプションを削除します
  • コンボをパネル内にラップする
于 2013-01-14T13:15:04.820 に答える
0

ウィジェットのエイリアスを変更します。エイリアス/ウィジェットは小文字にする必要があります:

エイリアス:「widget.cmbBox」、エイリアスへ:「widget.cmbbox」

于 2013-01-20T16:42:54.103 に答える