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

由于您使用的是路线，所以在本例中，首先需要检查视图是否已经创建。如果视图已经创建，那么您可以使用该视图，否则可以创建视图。

在这个小提琴中，我使用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
        });
    }
});