Question

我是Extjs的新手。我有一个带有卡布局的容器，有3个子视图，包括一个网格，一个用于创建的表单和一个用于使用路径更新的表单。

   items: [
         {xtype: 'feature-grid',id:'feature-grid},
         {xtype: 'create-form'},
         {xtype: 'update-form'}
    ],

第一次运行良好，但是当我更改路线并再次切换到此路线时，会出现此错误：

Uncaught Error: DOM element with id feature-grid in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()

当我删除id时，我的创建表单中的保存按钮不会向网格添加记录而不会出现任何错误！我的保存按钮是这样的：

var form = button.up('formpanel');
var values = form.getValues();
var user = Ext.create('App.model.User',values);
var cntr = this.getView('UserContainer')
var mainpanel = button.up('user-container');
var grid = mainpanel.down('grid');
grid.store.add(user);
form.reset();
this.redirectTo('users')

任何想法？

Answer 1

当您使用routes时，首先您需要检查视图是否已创建。如果已创建视图，则可以使用该视图，否则可以创建视图。

在 FIDDLE 中，我使用cardlayout，grid和form创建了一个演示版。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        //Define cotroller
        Ext.define('MainController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.maincontroller',

            routes: {
                'application/:node': 'onViewChange'
            },

            //this event will fire whenver routing will be changed
            onViewChange: function (xtype) {
                var view = this.getView(),
                    newNode = view.down(xtype);

                //if view is not crated then 1st created
                if (!newNode) {
                    newNode = Ext.create({
                        xtype: xtype
                    });
                }

                // is new view is form then first reset the form
                if (newNode.isXType('form')) {
                    newNode.reset();
                }
                // if new view type is update-form then load the record
                if (xtype == 'update-form') {
                    newNode.setRecord(this.record)
                    this.record = null;
                }

                //If view is created then directly set active that view
                view.setActiveItem(newNode);
            },

            //this event will fire when main view render
            onMainViewAfterRedner: function () {
                this.redirectTo('application/feature-grid');
            },
            //this event will fire when grid items clicked
            onGridItemClick: function (grid, index, target, record, e, eOpts) {
                this.record = record;
                this.redirectTo('application/update-form');
            },

            //this event will fire when cancel button clicked
            onCancelButtonClick: function () {
                this.redirectTo('application/feature-grid');
            },

            //this event will fire when add new button clicked
            onAddNew: function () {
                this.redirectTo('application/create-form');
            },

            //this event will fire when save button clicked
            onSaveButtonClick: function (button) {
                var me = this,
                    form = button.up('formpanel'),
                    store = me.getView().down('grid').getStore(),
                    values = form.getValues();

                if (form.xtype == 'update-form') {
                    store.findRecord('id', values.id).set(values);
                } else {
                    if (values.name && values.email && values.phone) {
                        delete values.id;
                        store.add(values);
                    } else {
                        Ext.Msg.alert('Info','Please enter form details');
                        return false;
                    }
                }
                this.onCancelButtonClick();
            }
        });

        Ext.define('AppForm', {
            extend: 'Ext.form.Panel',
            layout: 'vbox',
            bodyPadding: 10,
            defaults: {
                xtype: 'textfield',
                //flex: 1,
                width: '100%',
                margin: '10 5',
                labelAlign: 'top',
                allowBlank: false
            },
            items: [{
                name: 'id',
                hidden: true
            }, {
                name: 'name',
                label: 'Name'
            }, {
                name: 'email',
                label: 'Email'
            }, {
                name: 'phone',
                label: 'Phone Number'
            }, {
                xtype: 'toolbar',
                defaults: {
                    xtype: 'button',
                    ui: 'action',
                    margin: 5,
                    flex: 1
                },
                items: [{
                    text: 'Save',
                    formBind: true,
                    handler: 'onSaveButtonClick'
                }, {
                    text: 'Cancel',
                    handler: 'onCancelButtonClick'
                }]
            }]
        });

        //this create-form.
        Ext.define('CreateForm', {
            extend: 'AppForm',
            alias: 'widget.create-form',
            title: 'Create form'
        });

        //this update-form.
        Ext.define('UpdateForm', {
            extend: 'AppForm',
            alias: 'widget.update-form',
            title: 'Update form'
        });

        //this feature-grid.
        Ext.define('fGrid', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.feature-grid',
            title: 'User List grid',
            layout: 'vbox',
            items: [{
                xtype: 'grid',
                flex: 1,
                store: {
                    fields: ['name', 'email', 'phone'],
                    data: [{
                        name: 'Lisa',
                        email: 'lisa@simpsons.com',
                        phone: '555-111-1224'
                    }, {
                        name: 'Bart',
                        email: 'bart@simpsons.com',
                        phone: '555-222-1234'
                    }, {
                        name: 'Homer',
                        email: 'homer@simpsons.com',
                        phone: '555-222-1244'
                    }, {
                        name: 'Marge',
                        email: 'marge@simpsons.com',
                        phone: '555-222-1254'
                    }]
                },
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 1
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    flex: 1
                }],
                listeners: {
                    itemtap: 'onGridItemClick'
                }
            }],
            tools: [{
                type: 'plus',
                iconCls: 'x-fa fa-plus',
                handler: 'onAddNew'
            }],
            flex: 1
        });

        //Define the main view form extending panel
        Ext.define('MainView', {
            extend: 'Ext.panel.Panel',
            controller: 'maincontroller',
            alias: 'widget.mainview',
            layout: 'card',
            listeners: {
                painted: 'onMainViewAfterRedner'
            }
        });

        //this will create main view that is card layout
        Ext.create({
            xtype: 'mainview',
            renderTo: Ext.getBody(),
            fullscreen: true
        });
    }
});

extjs6现代卡layut

1 个答案: