PDA

View Full Version : How to connect two Panels



bsander
6 Aug 2010, 1:57 AM
How can i connect two panels.
If i click on a List Item i want to show a page, or an other div in the content panel.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {

Ext.regModel('Mensadays', {
fields: [
{ name: 'dateName', type: 'string' },
{ name: 'dateNumber', type: 'string'}]
});

var mddata = {
tpl: '<tpl for="."><div class="mddate">{dateNumber} <br /><strong>{dateName}</strong></div></tpl>',
itemSelector: 'div.mddate',
singleSelect: true,
grouped: false,
indexBar: false,
store: new Ext.data.Store({
model: 'Mensadays',
sorters: 'dateNumber',
data: [
{ dateName: 'Mittwoch', dateNumber: '04.08.2010' },
{ dateName: 'Donnerstag', dateNumber: '05.08.2010' },
{ dateName: 'Freitag', dateNumber: '06.08.2010' },
{ dateName: 'Montag', dateNumber: '09.08.2010' },
{ dateName: 'Dienstag', dateNumber: '10.08.2010' },
{ dateName: 'Mittwoch', dateNumber: '11.08.2010' },
{ dateName: 'Donnerstag', dateNumber: '12.08.2010' }
]
})
};

var listofdays = new Ext.List(Ext.apply(mddata, {
fullscreen: true,
xtype: 'list'
}));

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [{
html: 'Content',
style: 'background-color: #ccc;',
scroll: 'vertical',
styleHtmlContent: true,
dockedItems: [{
xtype: 'list',
dock: 'left',
width: 300,
styleHtmlContent: true,
items:
[listofdays]
}]
}]
});
}
});

kevchuey
6 Aug 2010, 8:29 AM
You could take a look at the KitchenSink example (http://www.sencha.com/deploy/touch/examples/kitchensink/).

Specifically, take a look at the onListChange call in index.js.

kevchuey
6 Aug 2010, 8:31 AM
You could take a look at the KitchenSink example (http://www.sencha.com/deploy/touch/examples/kitchensink/).

Specifically, take a look at the onListChange call in index.js.