PDA

View Full Version : Ext.ux.ChangePanel



temonix
16 Apr 2008, 7:48 PM
I wrote a component, but it has a number of bugs that i don't know how to resolve. I rely on your help to improve this component. It's realy usefull one.

Change form a panel that consist of 2 parts - accordion and panel. You can set types in accordion just calling one method setType and you can place other panels to that type by calling setPanel. Automaticaly will be created a button in type that you selected. On clicking on this button other part of component will be changed by selected panel. It comfortable for use for reports or config or something else that has many parts.

Using in following way:


ConfigTab = Ext.extend( Ext.Panel,{
initComponent:function(){
this.change = new Ext.ux.ChangePanel({
width: this.width - 10,
height: this.height - 7,
style: "margin: 4px;",
border: false
});

this.change.setType( t("Mobile") );

for (var i=1;i<11;i++) {
this.change.setPanel( t("Mobile"), new Ext.Panel({name: i, html: i, border: false}));
}

this.change.setType( t("Internet") );

for (var i=1;i<11;i++) {
this.change.setPanel( t("Internet"), new Ext.Panel({name: i, html: i, border: false}));
}

this.items = this.change;
ConfigTab.superclass.initComponent.call(this);
}
});


And source


Ext.ux.ChangePanel = Ext.extend(Ext.Panel, {
setType: function( name ) {
var type = {
name : name,
panels : new Array()
};
this.types[name] = type;
this.panelList.add({
title: name,
collapsed: true,
autoScroll: true
});
},

setPanel: function( type, panel ) {
this.types[type].panels.push( panel );
this.panelList.findBy( function( c ) {
if ( c.title == type ) {
if ( typeof( c.items ) == "undefined" ) {
c.initItems();
}
c.items.add( new Ext.Button({
text: panel.name,
handler: this.panelSelectHandler,
scope: this,
minWidth: 150,
style: "margin: 5px 20px auto;"
}) );

panel.hide();
this.changePanel.add( panel );
this.panels[panel.name] = panel;

return true;
}
}, this );
},

panelSelectHandler: function( btn ) {
if ( typeof( this.currentPanel ) != "undefined" ) {
this.currentPanel.hide();
}
this.panels[btn.text].show();
this.currentPanel = this.panels[btn.text];
},

initComponent:function(){
this.types = new Array();
this.panels = new Array();

this.panelList = new Ext.Panel({
layout:'accordion',
region: 'west',
height: this.height - 2 ,
width: 200
});

this.changePanel = new Ext.Panel({
border: false,
width: this.width - 200,
height: this.height - 2,
region: 'center'
});

this.items = new Ext.Panel({
border: false,
height: this.height,
plain: true,
items: [{
layout:"table",
border: false,
layoutConfig:{
columns:2
},
defaults:{
bodyStyle:"padding: 0px;",
border:false
},
items:[{
items: this.panelList
},{
items: this.changePanel
}]
}]
});
Ext.ux.ChangePanel.superclass.initComponent.call(this);
}
});


Problems:
1. If i remove collapsed property from setType method, only one type will be seen, becouse others will be hidden by bottom border of accordion element. I want first type extended.
2. In ie, if number of elements in type more than hight of this element, browser will form a scroll bar ( autoScroll option ), but in IE a half of scrollbar is hidden by right border of accordion
3. How component could be renamed, ChangePanel isn't good name for this element