PDA

View Full Version : How to repaint the panel



smathai
14 Oct 2009, 12:27 PM
Hi,

I have scenario where I need to have multiple box components inside a panel.
Assume I rendered Box1 Box2 Box4 Box5
After the panel is rendered, based on specific criteria I wanted to add Box3 in between
Also I might have to remove the Box4 for some other cases.

On adding/remove components: I need to realign the components so that it looks like

Box1 Box2 Box3 Box4 Box5 ----------------- in case of add

or

Box1 Box2 Box5 --------------- in case of remove
What is the best way to handle the scenario... I tried removing all items from the header and then add the components again (repaint Header). It looked like

what are the other options to achieve the result. What I was thinking was to hide those I don't want and reposition using set position. Please advice...

//remove all components.. I tried both false & true for autodestroy.When true,
// it works for the first time. What is happening is it destroys it for the first time
// and adds the components in header fine. Next time the status of the ext
// components is isDestroyed.so it does not try to remove them. So What I see
// is an the compoents are not getting removed.So the new stuff is rendered on
// top of the old one on doLayout.
function repaintHeader() {
header.removeAll(false);
addApplicableComponents ();
header.doLayout();
}

// which is the outer panel
function getHeader(){
header = new Ext.Panel({
id: 'headerPanel',
border: false,
layout: 'hbox',
autoWidth: true,
autoHeight: true,
hideBorders: true,
cls: 'wizard-title-text',
defaults:
{border:false}
});
return header;
};

// create box components and stores it in an array so that it can be reused later also
function createExtComponents(){
for (var i=0; i < data.length; i++) {
var Id = data[i];
var label = data[Id].label;
var isHidden = data[Id].hidden;

var component = new Ext.Panel({
baseCls: 'stepLabel',
id: 'xyz',
autoWidth: true,
autoHeight: true,
border: true,
hideBorders: false,
height: 25,

hideMode: 'offsets',
iconCls: 'stepIcon',
listeners : {render: function(c){
c.body.on('click', function()
{
setActive(x);
});
},
scope: this

},
html: label

});

extCompenents[i]=component ; // extCompenentsis a global variable that hold ext panels

};
};

//main method to create header panel on initial load
function createHeader () {
createExtComponents();
getHeader();
addApplicableComponents();
}

function addApplicableComponents {
var spcr = {
xtype: 'spacer', //spacer to go in between the boxes, is there better way.
width: 1
}

//add the components to the header
for (var i=0; i < data.length; i++) {
var isHidden = data[i].hidden;
if(!isHidden){
header.add(allSteps[i]);
if(i < (wizSteps.length -1) )
header.add(spcr); //adding spacer between components
}
}

}

function repaintHeader() {
header.removeAll(false);
addApplicableComponents ();
header.doLayout();
}