获取容器's在“;初始化”;在Sencha Touch中

Get container's record on "initialize" in Sencha Touch

本文关键字：初始化 Sencha Touch 获取更新时间：2023-09-26

我有一个listContainer，点击列表中的任何项目，我会打开另一个名为editContainer的页面，其中包含列表中的记录。在编辑页面中，我想禁用基于另一个字段值的下拉列表，有什么方法可以在editContainer的初始化函数中获取记录中的值吗？这是我的代码：-

onListItemTap:function(dataview,index,target,record,e,eOpts)
{
if(record)
this.editContainer = Ext.create('myApp.view.EditContainer',{title:'Edit Data'});
this.editContainer.setRecord(record);
this.getMainNav().push(this.editContainer);
}

上面的代码在选择列表项时打开editContainer。下面是我的EditContainer

Ext.define('myApp.view.EditContainer', {
    extend: 'Ext.Container',
    requires: [
    'Ext.form.Panel',
    'Ext.form.FieldSet',
    'Ext.field.Select'
],
config: {
    id: 'editContainer',
    autoDestroy: false,
    layout: 'fit',
    items: [
        {
            xtype: 'formpanel',
            id: 'editFormPanel',
            padding: 10,
            styleHtmlContent: true,
            autoDestroy: false,
            layout: 'fit',
            items: [
                {
                    xtype: 'fieldset',
                    id: 'nameFieldSet',
                    autoDestroy: false,
                    items: [
                        {
                            xtype: 'textfield',
                            id: 'siteName',
                            itemId: 'mytextfield',
                            label: 'Name',
                            labelWidth: '35%',
                            name: 'name'
                        },
                        {
                            xtype: 'selectfield',
                            id: 'role',
                            itemId: 'myselectfield4',
                            label: 'Role',
                            labelWidth: '35%',
                            name: 'role',
                            options: [
                                {
                                    text: 'Unassigned',
                                    value: 'Unassigned'
                                },
                                {
                                    text: 'Role1',
                                    value: 'role1'
                                }
                            ]
                        },
                        {
                            xtype: 'selectfield',
                            id: 'type',
                            label: 'Type',
                            labelWidth: '35%',
                            name: 'type',
                            options: [
                                {
                                    text: 'Default',
                                    value: 'Default'
                                },
                                {
                                    text: 'Custom',
                                    value: 'custom'
                                }
                            ]
                        },
                        {
                            xtype: 'selectfield',
                            id: 'roleValue',
                            label: 'Role Value',
                            labelWidth: '35%',
                            name: 'rolevalue',
                            options: [
                                {
                                    text: 'value1',
                                    value: 'value1'
                                },
                                {
                                    text: 'value2',
                                    value: 'value2'
                                },
                                {
                                    text: 'value3',
                                    value: 'value3'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    listeners: [
        {
            fn: 'onTextfieldKeyup',
            event: 'keyup',
            delegate: 'textfield'
        },
        {
            fn: 'onSelectfieldChange',
            event: 'change',
            delegate: 'selectfield'
        }
    ]
},
onTextfieldKeyup: function(textfield, e, eOpts) {
    this.fireEvent('change', this);
},
onSelectfieldChange: function(selectfield, newValue, oldValue, eOpts) {
    this.fireEvent('change', this);
},
initialize: function() {
    this.callParent();
    var record;
    //Code to disable roleValue selectfield if Role is unassigned.
},
updateRecord: function(newRecord) {
    var me = this,
        myPanel = me.down('#editFormPanel');
    if(myPanel)
        myPanel.setRecord(newRecord);
},
saveRecord: function() {
    var me =this,
        myStore = Ext.data.StoreManager.lookup('MyStore');
    var formPanel = me.down('#editFormPanel'),
        record = formPanel.getRecord();
    formPanel.updateRecord(record);
    return record;
}
});

由于在代码中创建editContainer和设置其数据是两个不同的步骤，因此不能使用editContainer的initialize方法。

但是您可以覆盖editContainer的setRecord方法，因此它还会禁用下拉列表。

由于您将editContainer推送到导航视图中，因此还可以使用editContainer的activate事件来禁用下拉列表。

也许您可以在运行中创建一个快速存储，作为引用该数据的地方。。。

    //in your controller where you set the record
    var mod = Ext.define('app.model.PanelDataModel', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                'roleValue'
            ]
        }
    });
    var sto = Ext.create('Ext.data.Store', {
        model: mod,
        id:'PanelDataStore'
    });
    sto.add({
        roleValue: record.roleValue
    });
    sto.sync();

    //Now in your panel's initialize method:
    var pstore = Ext.getStore('PanelDataStore');
    pstore.load();
    if(pstore.data.all[0].data.roleValue == 'unassigned'){
        Ext.getCmp('roleValue').setDisabled(true);
    }