PDA

View Full Version : Need to show Text name instead of Collapsible Symbol in Panel



arunmatics
27 Feb 2014, 9:08 AM
Hi Folks,

I need to show a text name instead of Collapsible symbol in panel. Here is the snapshot which one I expect now.

When I click the Show Details it would be do collapsible logic.

Thanks in Advance.

scottmartin
27 Feb 2014, 10:30 AM
See if this is what you are looking for:



Ext.define('MyApp.mixin.HeaderItems', {
headerItems : null,

addHeaderItems : function () {
var header = this.header,
headerItems = this.headerItems;

if (header && headerItems) {
// insert array of items before header items
if (headerItems.before) {
header.insert(0, headerItems.before);
}

// append array of items after header items
if (headerItems.after) {
header.add(headerItems.after);
}
}
}
});

Ext.define('MyApp.view.MyPanel', {
extend : 'Ext.panel.Panel',
xtype : 'myapp-mypanel',

requires : 'MyApp.mixin.HeaderItems',

mixins : {
headerItems : 'MyApp.mixin.HeaderItems'
},

headerItems : {
after : [
{
xtype : 'button',
text : 'Show Details',
itemId : 'detail-button'
}
]
},

updateHeader : function () {
MyApp.view.MyPanel.superclass.updateHeader.call(this);
this.mixins.headerItems.addHeaderItems.call(this);
}
});

Ext.onReady(function () {

var panel = Ext.create('MyApp.view.MyPanel', {
height : 100,
width : 300,
title : 'myTitle',
titleAlign : 'center',
html : 'My Information to display',
renderTo : Ext.getBody()
});

// quick check
var headerButton = panel.down('#detail-button');
headerButton.on('click', function(button) {
var panel = button.up('panel');
(panel.collapsed) ? panel.expand() : panel.collapse()
});

});