How to switch between cards in card layout

做~自己de王妃 提交于 2019-12-31 04:45:28

问题


I have a card layout having two cards one with tab panel.Inside tab panel grid panel is there and another card is my content panel. I have to switch to next card i.e my content panel on cell click on my grid panel.

Have used the setActiveitem() function but something is wrong.

extend: Ext.panel.Panel,
id: 'cardpanel',
width: 300,
height: 1000,
reference: 'resultcardPanel',
itemid: 'cardPanel',
layout: {
    type: 'card',
    anchor: '100%'
},
activeItem: 0,
xtype: 'searchresults',
bodyStyle: 'padding:15px',
defaults: {

    border: false
},
controller: 'email',

viewModel: {
    type: 'email'
},


items: [{
        xtype: 'tabpanel',
        //id:'searchresults',

        requires: [
            'Ext.grid.Panel',
            'Ext.toolbar.Paging',
            'Ext.grid.column.Date'
        ],


        cls: 'shadow',
        activeTab: 0,
        margin: 20,
        ///////////////////////////////////////////////////////
        items: [{
                xtype: 'grid',
                cls: 'allRecordsCls',
                scrollable: false,

                border: false,
                title: 'Primary',
                routeId: 'inbox',
                bind: '{inbox}',

                itemclick: function() {
                    centerpanel = new Ext.Panel({
                        layout: 'card',

                        items: [homepanel, browser.grid]
                    });

                    centerpanel.getLayout().setActiveItem(1);
                },
                selModel: {
                    selType: 'checkboxmodel',
                    checkOnly: true,
                    showHeaderCheckbox: true
                },

                headerBorders: false,
                rowLines: false,
                scrollable: false,

                listeners: {
                    itemclick: 'onGridCellItemClick2'
                },

                columns: [


                    {
                        dataIndex: 'from',
                        text: 'From',
                        width: 140,


                    },
                    {
                        dataIndex: 'title',
                        text: 'Subject',
                        flex: 1,

                    },


                    {
                        xtype: 'datecolumn',
                        dataIndex: 'received_on',
                        width: 90,
                        text: 'Received On'
                    }
                ],


            },
            //////////////////////////////////////////////////////////
            {
                xtype: 'grid',
                cls: 'allRecordsCls',
                scrollable: false,

                border: false,
                title: 'Social',
                routeId: 'inbox',
                bind: '{inbox}',

                listeners: {
                    itemclick: 'clickme'
                },

                selModel: {
                    selType: 'checkboxmodel',
                    checkOnly: true,
                    showHeaderCheckbox: true
                },

                headerBorders: false,
                rowLines: false,
                scrollable: false,

                columns: [


                    {
                        dataIndex: 'from',
                        text: 'From',
                        width: 140,


                    },
                    {
                        dataIndex: 'title',
                        text: 'Subject',
                        flex: 1,

                    },


                    {
                        xtype: 'datecolumn',
                        dataIndex: 'received_on',
                        width: 90,
                        text: 'Received On'
                    }
                ],
            },
            ///////////////////////////////////////////////////////
            {
                xtype: 'grid',
                cls: 'allRecordsCls',
                scrollable: false,

                border: false,
                title: 'Promotion',
                routeId: 'inbox',
                bind: '{inbox}',

                selModel: {
                    selType: 'checkboxmodel',
                    checkOnly: true,
                    showHeaderCheckbox: true
                },

                listeners: {
                    itemclick: 'onGridCellItemClick2'
                },

                headerBorders: false,
                rowLines: false,
                scrollable: false,

                columns: [


                    {
                        dataIndex: 'from',
                        text: 'From',
                        width: 140,


                    },
                    {
                        dataIndex: 'title',
                        text: 'Subject',
                        flex: 1,

                    },


                    {
                        xtype: 'datecolumn',
                        dataIndex: 'received_on',
                        width: 90,
                        text: 'Received On'
                    }
                ],
            },
        ],
    },

    ///////////////////////////////////////////
    {
        id: 'cardPanel',
        xtype: 'emaildetails'
    },
]

what to write in function in "onGridCellItemClick2" which is declared in controller

来源:https://stackoverflow.com/questions/56967758/how-to-switch-between-cards-in-card-layout

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!