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, I have create a demo using cardlayout, grid and form。我希望这将 help/guide 你达到你的要求。

代码片段

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 现代卡片布局

extjs6 modern card layut

extjs

cardlayout