2

実行時にストア データを設定しようとしているコンボ ボックスのプロトタイプがあります。

これを実行しようとすると、コンボボックスの下のメニューがレンダリングされません (または、レンダリングが小さすぎて実際には表示されません)。それは煎茶フィドルにあります：

Ext.define('ComboBoxRates',{
    extend: 'Ext.data.Store',
    alias: 'store.rates',
    storeId: 'ratescombo',
    fields: ['rate', 'description', 'price' ]
});

Ext.define('ComboPanel',{
    extend: 'Ext.panel.Panel',
    title: 'Test',
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'combobox',
            editable: false,
            displayField: 'description',
            valueField: 'price',
        }
    ]    
});


Ext.application({
    name : 'Fiddle',

    launch : function() {

        var data = [
            {
                description: "$105: Standard Registration",
                price: "105",
                rate: "rate1"
            },
            {
                description: "$125: Non-Member Rate",
                price: "125",
                rate: "rate2"
            },
            {
                description: "$44: Price for SK tester",
                price: "44",
                rate: "rate3"
            },
            {
                description: "$11: Another price :O",
                price: "11",
                rate: "rate5"
            }
        ];

        var rates = Ext.create('ComboBoxRates');

        rates.setData(data);

        // Showing data is loaded into the store
        console.group('directly from store instance');
        rates.each(function (rate){
           console.log(rate.getData());
        });
        console.groupEnd();

        var panel = Ext.create('ComboPanel');


        panel.down('combobox').setStore(rates);

        // Showing that the data is definitely in the widget's store        
        console.group('from widget store');
        panel.down('combobox').getStore().each(function (rate){
           console.log(rate.getData());
        });
        console.groupEnd();



    }
});

データがコンボボックスのストアに読み込まれていることはわかっているので (フィドルでコンソール ログを開きます)、正しくレンダリングされない理由がわかりません。

この文脈ではばかげているように思えますが、プロトタイプはグリッドのウィジェット列から抽出されたロジックであり、各行には異なる店舗データがあります。

同じ構造でワンステップバックのプロトタイプも作成しましたが、同じデータがストアの定義にインライン化されており、機能します。

Ext.define('ComboBoxRates',{
    extend: 'Ext.data.Store',
    alias: 'store.rates',
    storeId: 'ratescombo',
    fields: ['rate', 'description', 'price' ],
    data: [
        {
            description: "$105: Standard Registration",
            price: "105",
            rate: "rate1"
        },
        {
            description: "$125: Non-Member Rate",
            price: "125",
            rate: "rate2"
        },
        {
            description: "$44: Price for SK tester",
            price: "44",
            rate: "rate3"
        },
        {
            description: "$11: Another price :O",
            price: "11",
            rate: "rate5"
        }
    ]
});

Ext.define('ComboPanel',{
    extend: 'Ext.panel.Panel',
    title: 'Test',
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'combobox',
            editable: false,
            displayField: 'description',
            valueField: 'price',
        }
    ]    
});


Ext.application({
    name : 'Fiddle',

    launch : function() {


        var rates = Ext.create('ComboBoxRates');

        var panel = Ext.create('ComboPanel');

        panel.down('combobox').setStore(rates);
    }
});

updateLayout で問題が解決すると思っていましたが、そうではありません。

私のコードに何か問題がありますか? 実行時にコンボボックスの値を設定する方法はありますか?

4

1 に答える 1

2

がありません。コンボqueryModeで使用してください。queryMode: 'local'

作業例: https://fiddle.sencha.com/#fiddle/10al

于 2015-10-30T06:34:08.920 に答える