I am new in Sencha. I try to add a dynamic collapsible panel in application page where I need to show data in title and information in collapsible panel, but it's not showing any data not even showing any error. I am fully confused what I am doing wrong, please help me.
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'
}
]
}
]
}
});
There is no config property for container. You will have to set the items array to the container and not to the config attribute.
Code as shown below.
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'
}]
}]
});