Sencha 应用程序中的可折叠面板出错

Question

我是 Sencha 的新手。我尝试在应用程序页面中添加一个动态可折叠面板，我需要在可折叠面板中显示标题和信息中的数据，但它没有显示任何数据，甚至没有显示任何错误。我很困惑我做错了什么，请帮助我。

        Ext.define('myapp.view.applications.DetailSummarySection',{
            extend:'Ext.Container',
            xtype:'applications_detailsummarysection',

            config:{
                emptyText:'No data found',
                appId:null,
                items:[
                    {
                        itemId:'details_summary',
                        tpl:Ext.create('Ext.XTemplate',
                            '<tpl for="details">',
                                   //....................
                            '</tpl>'
                        )
                    },
                    {
                        xtype: 'formpanel',
                        collapsible: true,
                        collapsed: true,
                        layout: 'hbox',
                        bodyPadding: 10,
                        title: 'Dates',
                        items: [{
                            xtype: 'textfield',
                            name: 'name',
                            label: 'Name'
                        }]
                   },
                    {
                        xtype:'toolbar',
                        itemId:'popup_bar',
                        docked:'bottom',
                        border:'0px',
                        height:'54px',
                        style:{'background-color':'#1E94C0'},

                        defaults:{
                            flex:1,
                            height:'48px',
                            padding:'0 0 0 0',
                            style:{ 'line-height':'10px','margin':'3px 0 0 0 ','border-radius':'0px', 'color':'#ffffff', 'background-color':'transparent', 'border':'0px'}
                        },
                        items:[
                            {
                                text:'Comments',
                                itemId:'notes',
                                cls:'pop-btn',
                                iconCls:'action',
                                iconAlign:'top'
                            },
                            {
                                text:'Feedback',
                                itemId:'feedBackBtn',
                                cls:'pop-btn',
                                iconCls:'star',
                                iconAlign:'top'
                            },
                            {
                                text:'CVS',
                                itemId:'cv',
                                cls:'pop-btn',
                                iconCls:'compose',
                                iconAlign:'top'
                            },
                            {
                                text:'Reject',
                                cls:'pop-btn',
                                itemId:'rejectBtn',
                                iconAlign:'top',
                                iconCls:'trash'
                            },
                            {
                                text:'Reject',
                                cls:'pop-btn',
                                itemId:'rejectCvSpecBtn',
                                hidden:true,
                                iconAlign:'top',
                                iconCls:'trash'

                            }
                        ]
                    }
                ]
            }
        });

Answer 1

没有config属性容器。您必须将 items 数组设置为容器而不是 config 属性。

代码如下。

Ext.define('myapp.view.applications.DetailSummarySection', {
    extend: 'Ext.Container',
    xtype: 'applications_detailsummarysection',
    emptyText: 'No data found',
    appId: null,
    items: [{
        itemId: 'details_summary',
        tpl: Ext.create('Ext.XTemplate',
            '<tpl for="details">',
            //....................
            '</tpl>'
        )
    }, {
        xtype: 'formpanel',
        collapsible: true,
        collapsed: true,
        layout: 'hbox',
        bodyPadding: 10,
        title: 'Dates',
        items: [{
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        }]
    }, {
        xtype: 'toolbar',
        itemId: 'popup_bar',
        docked: 'bottom',
        border: '0px',
        height: '54px',
        style: {
            'background-color': '#1E94C0'
        },

        defaults: {
            flex: 1,
            height: '48px',
            padding: '0 0 0 0',
            style: {
                'line-height': '10px',
                'margin': '3px 0 0 0 ',
                'border-radius': '0px',
                'color': '#ffffff',
                'background-color': 'transparent',
                'border': '0px'
            }
        },
        items: [{
            text: 'Comments',
            itemId: 'notes',
            cls: 'pop-btn',
            iconCls: 'action',
            iconAlign: 'top'
        }, {
            text: 'Feedback',
            itemId: 'feedBackBtn',
            cls: 'pop-btn',
            iconCls: 'star',
            iconAlign: 'top'
        }, {
            text: 'CVS',
            itemId: 'cv',
            cls: 'pop-btn',
            iconCls: 'compose',
            iconAlign: 'top'
        }, {
            text: 'Reject',
            cls: 'pop-btn',
            itemId: 'rejectBtn',
            iconAlign: 'top',
            iconCls: 'trash'
        }, {
            text: 'Reject',
            cls: 'pop-btn',
            itemId: 'rejectCvSpecBtn',
            hidden: true,
            iconAlign: 'top',
            iconCls: 'trash'

        }]
    }]
});