PDA

View Full Version : Open a list after clicking on a panel



ubik74
20 Jul 2011, 2:17 AM
Hello
just starting with sencha apps
I have a little probleme, i have initilised a web app using oreil base

i have on one menu item a panel, i would like on clik to load a list html page
i have put an alert and find the good id item but didn't succes to load php page associated



oreilly.views.CollectionList = Ext.extend(Ext.Panel, {
cls: 'cards',
fullscreen: true,

layout: {
type: 'vbox',
align: 'stretch'
},

defaults: {
flex: 1
},


items: [

{
xtype: 'carousel',

items: [

{



html: '<div ><div style="overflow:hidden; height:429px; width:319px; position:absolute;z-index:1"><div style="margin-left:-140px; margin-top:-80px;"><a href="#"><img class="ac_bgimage imageLoaded" src="/img/c/5.jpg" alt="Background" width="590px" height="460px" /></a></div></div></div>',
cls: 'card card1'



},
{
html: '<div ><div style="overflow:hidden; height:429px; width:319px; position:absolute;z-index:1"><div style="margin-left:-140px; margin-top:-80px;"><a href="#"><img class="ac_bgimage imageLoaded" src="/img/c/6.jpg" alt="Background" width="590px" height="460px" /></a></div></div></div>',
cls: 'card card2'
},
{
html: '<div id="abg3"><div style="overflow:hidden; height:419px; width:319px; position:absolute;z-index:1"><div style="margin-left:-140px; margin-top:-80px;"><a href="#"><img class="ac_bgimage imageLoaded" src="/img/c/7.jpg" alt="Background" width="590px" height="460px" /</a></div></div></div>',
cls: 'card card3'
},
{
html: '<div ><div style="overflow:hidden; height:429px; width:319px; position:absolute;z-index:1"><div style="margin-left:-140px; margin-top:-80px;"><a href="#"><img class="ac_bgimage imageLoaded" src="/img/c/8.jpg" alt="Background" width="590px" height="460px" /></a></div></div></div>',
cls: 'card card3'
},
{
html: '<div ><div style="overflow:hidden; height:429px; width:319px; position:absolute;z-index:1"><div style="margin-left:-140px; margin-top:-80px;"><a href="#"><img class="ac_bgimage imageLoaded" src="/img/c/9.jpg" alt="Background" width="590px" height="460px" /></a></div></div></div>',
cls: 'card card3'
}
],
listeners: {
cardswitch: function(carousel, newCard, oldCard, index){
alert(index);
//lloading the html list page
}
},









dockedItems: {
xtype: 'toolbar',
title: 'La collection'
}

}

]


});

Ext.reg('collectionlist', oreilly.views.CollectionList);

If tap or double tap i would like to remove actual panel and lauch panel like


oreilly.views.collectionDetailList = Ext.extend(Ext.Panel, {
layout: 'card',
initComponent: function(){

this.list = new Ext.List({
itemTpl: '<div class="page">{title}</div>',
ui: 'round',
store: new Ext.data.Store({
fields: ['name', 'card'],
data: this.pages
}),
listeners: {
selectionchange: {fn: this.onSelect, scope: this}
},
title: 'About'
});

this.listpanel = new Ext.Panel({
title: 'Retour',
items: this.list,
layout: 'fit',
dockedItems: {
xtype: 'toolbar',
title: 'Nos Mobiliers'
}
})

this.listpanel.on('activate', function(){
this.list.getSelectionModel().deselectAll();
}, this);

this.items = [this.listpanel];

oreilly.views.collectionDetailList.superclass.initComponent.call(this);
},

onSelect: function(sel, records){
if (records[0] !== undefined) {
var newCard = Ext.apply({}, records[0].data.card, {
prevCard: this.listpanel,
title: records[0].data.title
});

this.setActiveItem(Ext.create(newCard), 'slide');
}
}
});

Ext.reg('collectionDetail', oreilly.views.collectionDetailList);



How do i manage to load this structure and pushing the good item panel id on the php pages that will load ?
I will o have a list page will all item that will be in panelID part, then a sub panel that will have detail of each item in list part
the php page will call something like collectionDetail.php and need to grab in id of panel to do a mysql query

Sorry for my new question just stating to use this
Thanks to all