Прикованный Selectfields - Sencha Touch 2.0 - PullRequest
1 голос
/ 28 марта 2012

Я использую пример Sencha Touch 2.0 KitchenSink, чтобы попытаться изучить некоторые основы.Я застреваю на цепях выбора хотя.

Я выхожу из учебника , но с другой настройкой меня сбрасывают.Приведенный ниже код прекрасно работает в файле Forms.js на kitchensink, но мне не хватает его фактической цепочки выбора.

РЕДАКТИРОВАТЬ: я спрашиваю, как создать цепочки selectfields.У меня есть хранилища данных и поля выбора в примере кода, но нет рабочего цепочки выбора с первого по второй.

Ext.regModel('First', {
idProperty: 'FirstID',
            fields: [{
                name: 'FirstID',
                type: 'int'
            }, {
                name: 'FirstName',
                type: 'string'
            }]
        });

Ext.regModel('Second', {
idProperty: 'SecondID',
            fields: [{
                name: 'SecondID',
                type: 'int'
            },{
                name: 'FirstID',
                type: 'int'
            }, {
                name: 'SecondName',
                type: 'string'
            }]
        });

        var firstStore = new Ext.data.Store({
            model: 'First',
            data: [{
                FirstID: 1,
                FirstName: 'Kenworth'
            }, {
                FirstID: 2,
                FirstName: 'Peterbilt'
            }],
            autoLoad: true
        });

  var secondStore = new Ext.data.Store({
            model: 'First',
            data: [{
                SecondID: 1,
                FirstID: 1,
                SecondName: 'T800'
            }, {
                SecondID: 2,
                FirstID: 1,
                SecondName: 'T700'
            }, {
                SecondID: 3,
                FirstID: 1,
                SecondName: 'T660'
            }, {
                SecondID: 4,
                FirstID: 1,
                SecondName: 'T470'
            }],
            autoLoad: true
        });



Ext.define('Kitchensink.view.Forms', {


extend: 'Ext.tab.Panel',

requires: [
    'Ext.form.Panel',
    'Ext.form.FieldSet',
    'Ext.field.Number',
    'Ext.field.Spinner',
    'Ext.field.DatePicker',
    'Ext.field.Select',
    'Ext.field.Hidden'
],

config: {
    activeItem: 0,
    tabBar: {
        // docked: 'bottom',
        ui: 'dark',
        layout: {
            pack: 'center'
        }
    },
    items: [
        {
            title: 'Basic',
            xtype: 'formpanel',
            id: 'basicform',
            iconCls: 'refresh',
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Enter Data',
                    instructions: 'Please enter the information above.',
                    defaults: {
                        labelWidth: '35%'
                    },
                    items: [

                        {
                        xtype: 'selectfield',
                        name: 'firstfield',
                        label: 'First',
                        store: firstStore,
                        displayField: 'FirstName',
                        valueField: 'FirstID'
                    }, {
                        xtype: 'selectfield',
                        name: 'secondfield',
                        label: 'Second',
                        store: secondStore,
                        displayField: 'SecondName',
                        valueField: 'SecondID'
                    }
                    ]
                }
            ]
        }   

    ]

},

            onFirstChange: function(selectField, value){
                var secondSelectField = this.items.get(1);

                secondSelectField.store.clearFilter(); // remove the previous filter

                // Apply the selected Country's ID as the new Filter
                secondSelectField.store.filter('FirstID', value);

                // Select the first City in the List if there is one, otherwise set the value to an empty string
                var firstValue = secondSelectField.store.getAt(0);
                if(firstValue){
                    secondSelectField.setValue(firstValue.data.SecondID);
                } else {
                    secondSelectField.setValue('');
                }
            }


});
...