PDA

View Full Version : How to add List in a TabPanel.



manishprajapati
12 Oct 2011, 9:32 PM
I have added List in tabpanel. Its working fine but when i go on the detail page (After click on the list item) so i am showing a panel. On the panel i have a button "Take Action" when i click on the "Take Action" I am showing another panel and hiding Next panel. But it is not working perfectly. Even setActiveItem is not working. Please help me out.





Ext.regModel('Alert', {
fields: [
{ name: 'title', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'created', type: 'string' }
]
});






techCurl.views.AlertList = Ext.extend(Ext.Panel, {
layout: 'card',
fullscreen: true,
initComponent: function() {

var lastPanel = null;
var lastDetailData = null;
techCurl.views.newsStore = new Ext.data.Store({
model: 'Alert',
sorters: 'title',
getGroupString: function(record) {
return record.get('title')[0];
},
data: [
{ title: "New Happy Birthday", description: "techCurl birthday", created: "11.08.2011" },
{ title: "New Happy New Year", description: "techCurl New Year", created: "01.01.2012" }

]
});

techCurl.views.newsPanel = new Ext.Panel({ items:
new Ext.List({
store: techCurl.views.newsStore,
itemTpl: '<div>{title} {description}</div>',
onItemDisclosure: function(record, btn, index) {
techCurl.views.detailPanel.update(record.data);
techCurl.views.mainPanel.setActiveItem(techCurl.views.detailPanel);
lastDetailData = record.data;
lastPanel = techCurl.views.mainPanel;

techCurl.views.detailPanel.show({ type: 'slide' });
techCurl.views.mainPanel.hide({ type: 'slide' });
techCurl.views.detailStep1Panel.show({ type: 'slide' });
}
})
});



techCurl.views.signedStore = new Ext.data.Store({
model: 'Alert',
sorters: 'title',
getGroupString: function(record) {
return record.get('title')[0];
},
data: [
{ title: "signed Happy Birthday", description: "techCurl birthday", created: "11.08.2011" },
{ title: "signed Happy New Year", description: "techCurl New Year", created: "01.01.2012" }

]
});

techCurl.views.signedPanel = new Ext.Panel({ items: new Ext.List({
store: techCurl.views.signedStore,
itemTpl: '<div>{title} {description}</div>',
onItemDisclosure: function(record, btn, index) {
lastDetailData = record.data;
lastPanel = techCurl.views.mainPanel;
techCurl.views.detailPanel.update(record.data);
techCurl.views.detailPanel.show({ type: 'slide' });
techCurl.views.mainPanel.hide({ type: 'slide' });

}
})
});

techCurl.views.archivedStore = new Ext.data.Store({
model: 'Alert',
sorters: 'title',
getGroupString: function(record) {
return record.get('title')[0];
},
data: [
{ title: "archived Happy Birthday", description: "techCurl birthday", created: "11.08.2011" },
{ title: "archived Happy New Year", description: "techCurl New Year", created: "01.01.2012" }

]
});

techCurl.views.archivedPanel = new Ext.Panel({ items: new Ext.List({
store: techCurl.views.archivedStore,
itemTpl: '<div>{title} {description}</div>',
onItemDisclosure: function(record, btn, index) {
lastDetailData = record.data;
lastPanel = techCurl.views.mainPanel;
techCurl.views.detailPanel.update(record.data);
techCurl.views.detailPanel.show({ type: 'slide' });
techCurl.views.detailStep1Panel.show({ type: 'slide' });
techCurl.views.mainPanel.hide({ type: 'slide' });
}
}
)
});


techCurl.views.actNowStore = new Ext.data.Store({
model: 'Alert',
sorters: 'title',
getGroupString: function(record) {
return record.get('title')[0];
},
data: [
{ title: "actnow Happy Birthday", description: "techCurl birthday", created: "11.08.2011" },
{ title: "actnow Happy New Year", description: "techCurl New Year", created: "01.01.2012" }

]
});

techCurl.views.actnowPanel = new Ext.Panel({ items: new Ext.List({
store: techCurl.views.actNowStore,
itemTpl: '<div>{title} {description}</div>',
onItemDisclosure: function(record, btn, index) {
lastDetailData = record.data;
lastPanel = techCurl.views.mainPanel;
techCurl.views.detailPanel.update(record.data);
techCurl.views.detailPanel.show({ type: 'slide' });
techCurl.views.mainPanel.hide({ type: 'slide' });
}
})
});



techCurl.views.tapHandler = function(button, event) {
techCurl.views.detailStep1Panel.hide({ type: 'flip' });
techCurl.views.detailStep2Panel.show({ type: 'flip' });

};
techCurl.views.backHandler = function(button, event) {
techCurl.views.detailStep1Panel.show({ type: 'flip' });
techCurl.views.detailStep2Panel.hide({ type: 'flip' });
};

techCurl.views.detailStep1Panel = new Ext.Panel({
layout: {
type: 'vbox'
},
dockedItems: [
{
xtype: 'toolbar',
items: [
{
ui: 'back',
text: 'Back',
scope: this,
handler: function() {
techCurl.views.mainPanel.show({ type: 'slide' });
techCurl.views.detailStep1Panel.hide({ type: 'slide' });
techCurl.views.detailStep2Panel.hide({ type: 'slide' });


}
}

],
title: 'Take Action'

},
{
styleHtmlContent: true,
tpl: new Ext.XTemplate('<div align="center"><h3>{title}</h3><br/>{description}</div>'),
data: lastDetailData
}

],

items: [

{
xtype: 'button',
text: 'Take Action',
width: 150,
stretch: false,
handler: techCurl.views.tapHandler
}]
});



techCurl.views.detailStep2Panel = new Ext.Panel({
layout: {
type: 'vbox'
},
cls: 'topPanelCls',
dockedItems: [
{
xtype: 'toolbar',
items: [
{
ui: 'back',
text: 'Back',
scope: this,
handler: function() {
techCurl.views.mainPanel.show({ type: 'slide' });
techCurl.views.detailStep1Panel.hide({ type: 'slide' });
techCurl.views.detailStep2Panel.hide({ type: 'slide' });

}
}

],
title: 'Step - 2'

},
{
styleHtmlContent: true,
tpl: new Ext.XTemplate('<div align="center"><h3>{title}</h3><br/>{description}</div>'),
data: lastDetailData
}

],

items: [

{
xtype: 'button',
text: 'Back',
width: 150,
stretch: false,
handler: techCurl.views.backHandler
}]
});

techCurl.views.detailPanel = new Ext.Panel({
id: 'detailpanel',
layout: 'card',
fullscreen: true,
tpl: 'Hello, {title}! <br/>',
dockedItems: [techCurl.views.detailStep1Panel, techCurl.views.detailStep2Panel]



});






var dockedItems = [{

xtype: 'toolbar',
dock: 'top',
title: 'Alerts'
},
{
xtype: 'tabpanel',
layout: 'card',
dock: 'top',
fullscreen: true,

items: [{
title: 'News',
xtype: 'panel',
dockitems: techCurl.views.detailPanel,
items: techCurl.views.newsPanel
},
{
title: 'Signed',
xtype: 'panel',
items: techCurl.views.signedPanel

},
{
title: 'Archived',
xtype: 'panel',
items: techCurl.views.archivedPanel


},
{
title: 'Act Now',
xtype: 'panel',
items: techCurl.views.actnowPanel
}
]
}
]













techCurl.views.mainPanel = new Ext.Panel({
layout: 'card',
id: 'appPanel',
fullscreen: true,
dockedItems: dockedItems
});
this.items = techCurl.views.mainPanel;
techCurl.views.detailPanel.hide();
techCurl.views.detailStep2Panel.hide();
techCurl.views.AlertList.superclass.initComponent.call(this);
}
});

Ext.reg('alertlist', techCurl.views.AlertList);