extjs6 现代卡片布局

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创建了一个演示。我希望这将帮助/指导您实现您的要求。

代码片段

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
        });
    }
});