hemant1
28 Jul 2011, 5:29 AM
Hi
i have created a web application in that i have created a menu(nested list) and on the click of nested list leaf item it displays the carousel with number of pages
now the problem is there is only one carousel object which holds the number of pages
i want to do that when i click on the 4th (or any) leaf item of nested list i want to display the 4th page of carousel
how it is possible
here is my code
structures.js file is here
sink.Structure = [
{
text: 'Chapter1',
items: [
{
text: 'Start',
id:'1',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
},
{
text: 'Start1',
id:'2',
card: demos.Carousel,
iconMask: true,
iconcls: 'refresh',
source: 'carousel.js',
leaf: true
},
{
text: 'Start2',
id:'3',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
},
{
text: 'Start3',
id:'4',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
}]
},
{
text: 'Home',
card: demos.panel,
source: 'home.js',
leaf: true
},
{
text: 'Exit',
card: demos.Carousel,
leaf: true
}
];
Ext.regModel('Demo', {
fields: [
{ name: 'text', type: 'string' },
{ name: 'id', type: 'string' },
{ name: 'source', type: 'string' },
{ name: 'preventHide', type: 'boolean' },
{ name: 'cardSwitchAnimation' },
{ name: 'card' }
]
});
sink.StructureStore = new Ext.data.TreeStore({
model: 'Demo',
root: {
items: sink.Structure
},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
and the index.js file from where i call the demos.carouel
onNavPanelItemTap: function (subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
nestedList = this.navigationPanel,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
slide_id = record.get('id');
anim = record.get('cardSwitchAnimation');
preventHide = record.get('preventHide');
}
if (Ext.Viewport.orientation == 'portrait' && !Ext.is.Phone && !recordNode.childNodes.length && !preventHide) {
this.navigationPanel.hide();
}
if (card) {
this.setActiveItem(card, anim || 'slide'); This is the place from where demos.carousel is called
this.currentCard = card;
}
if (title) {
// this.navigationBar.setTitle(title);
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, record);
},
pls show me the right path
thanks a lot,
i have created a web application in that i have created a menu(nested list) and on the click of nested list leaf item it displays the carousel with number of pages
now the problem is there is only one carousel object which holds the number of pages
i want to do that when i click on the 4th (or any) leaf item of nested list i want to display the 4th page of carousel
how it is possible
here is my code
structures.js file is here
sink.Structure = [
{
text: 'Chapter1',
items: [
{
text: 'Start',
id:'1',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
},
{
text: 'Start1',
id:'2',
card: demos.Carousel,
iconMask: true,
iconcls: 'refresh',
source: 'carousel.js',
leaf: true
},
{
text: 'Start2',
id:'3',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
},
{
text: 'Start3',
id:'4',
card: demos.Carousel,
source: 'carousel.js',
leaf: true
}]
},
{
text: 'Home',
card: demos.panel,
source: 'home.js',
leaf: true
},
{
text: 'Exit',
card: demos.Carousel,
leaf: true
}
];
Ext.regModel('Demo', {
fields: [
{ name: 'text', type: 'string' },
{ name: 'id', type: 'string' },
{ name: 'source', type: 'string' },
{ name: 'preventHide', type: 'boolean' },
{ name: 'cardSwitchAnimation' },
{ name: 'card' }
]
});
sink.StructureStore = new Ext.data.TreeStore({
model: 'Demo',
root: {
items: sink.Structure
},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
and the index.js file from where i call the demos.carouel
onNavPanelItemTap: function (subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
nestedList = this.navigationPanel,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
slide_id = record.get('id');
anim = record.get('cardSwitchAnimation');
preventHide = record.get('preventHide');
}
if (Ext.Viewport.orientation == 'portrait' && !Ext.is.Phone && !recordNode.childNodes.length && !preventHide) {
this.navigationPanel.hide();
}
if (card) {
this.setActiveItem(card, anim || 'slide'); This is the place from where demos.carousel is called
this.currentCard = card;
}
if (title) {
// this.navigationBar.setTitle(title);
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, record);
},
pls show me the right path
thanks a lot,