PDA

View Full Version : Ext.ux.CardPanel (beta.but.stable)



DigitalSkyline
9 Mar 2008, 11:49 AM
A Card(Layout)Panel implementation. Abstracted from and following the same conventions as TabPanel (but of course, without the tabs).

As always, K.I.S.S. /:)

Ex Usage:


{
xtype:'cardpanel',
activeCard: 0,
items: [Mygrid, MyForm, MyComponent, MyPanel]
}

dawesi
9 Mar 2008, 1:49 PM
nice one bro!! keep up the good work!

Slartibartfast
5 May 2008, 6:22 PM
Hi,

Just trying to use your cardpanel extension with no luck. Here is my straight forward example. Any clues?

Ext.onReady(function(){
var p1 = new Ext.Panel({
title: 'My Panel 1',
collapsible:true,
width:400,
html: 'text here<br/>text here'
});
var p2 = new Ext.Panel({
title: 'My Panel 2',
collapsible:true,
width:400,
html: 'text here<br/>text here'
});
var p = new Ext.Panel({
xtype: 'cardpanel',
activeCard: 0,
items: [p1, p2],
renderTo: 'container'
});
});

hendricd
5 May 2008, 6:50 PM
ux.CardPanel is the container. Try it this way:


var p = new Ext.ux.CardPanel({
xtype: 'cardpanel',
activeCard: 0,
items: [p1, p2],
renderTo: 'container'
});
});

Slartibartfast
5 May 2008, 7:29 PM
Ok,

Looks like my example with the small mod (thanks hendricd) works fine.

It appears to me just a Tab Panel without Tabs with some new functions like setActiveCard instead of setActiveTab.

If I use a card layout instead, I will get the same features and to switch between items, I just call layout.setActiveItem(). So is there any advantage using CardPanel compared with the card layout?

DigitalSkyline
6 May 2008, 9:02 AM
I personally use the extension for the events, and convenience. I'm also working on a Wizard that ties in with this... albeit there are several Wizards out there so I haven't posted mine (yet).

apaa
6 May 2008, 6:56 PM
Can you give an Example about it..thx..

JorisA
7 May 2008, 12:51 AM
hm maybe I'm crazy but what's the difference between this and

var card = new Ext.Panel({
title: 'Example Wizard',
layout:'card',
activeItem: 0, // make sure the active item is set on the container config!
....
})
?

DigitalSkyline
7 May 2008, 10:28 AM
:-?

{
id:'ACardPanel',
region : 'center',
xtype:'cardpanel',
activeCard:0,
items: [this.Panel1(), this.Panel2(), this.Panel3()],
listeners: {
beforecardchange : function(){ /* do something */ },
cardchange : function(){ /* do something else */ }
},
bbar: [{
xtype:'switch', //the switch button, found in examples.
id: 'CNViewBTN',
activeItem:0,
items: [{
iconCls:'viewCards',
tooltip:'Card View'
},{
iconCls:'viewGrid',
tooltip:'Grid View'
},{
iconCls:'viewDetails',
tooltip:'Detailed View'
}],
listeners: {
change: function(s,i){
Ext.getCmp('ACardPanel').setActiveCard(s.getActiveIndex());
}
}
}]
}


=D>
Also the extension adds some defaults to fix problems rendering forms etc. and .x-panel css class that you can customize...

In my application its proving quite useful, though detailing exactly how I'm using it was not my purpose here. So here, have some tea ~o) , it's on me!

KampfCaspar
10 May 2008, 4:55 AM
Great!

Just a question... Wouldn't it be "more correct" to have TabPanel as a descendant of CardPanel? TabPanel is sort of a CardPanel "enhanced" by the tab strip, no?

KampfCaspar