Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout: {
type: 'card',
animation: {
type: 'slide',
}
},
items: [
/************** panel home ***************/
{
xtype: 'panel',
id:'homePanel',
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
items : [
{
xtype: 'panel',
items : [{
xtype: 'toolbar',
items : [
{
xtype: 'image',
docked: 'left',
html: '<div class="applogo"><img src="../images/logo.png"/></div>',
ui: 'light'
},
{
xtype: 'button',
docked: 'right',
html: '<img src="../images/about_us.png"/>',
id: 'BtnInfo',
itemId: 'BtnInfo',
style: '',
handler:function(){
Ext.getCmp('homePanel').setActiveItem('aboutusPanel');
}
},
]
},
{ xtype: 'panel',
height: 136,
items: [{
xtype: 'carousel',
id:'HomeCarousel',
height: 136,
items: [
{
title: 'title card 1',
html: '<img src="../images/image_5.png"/>'
},
{
title: 'title card 2',
html: '<img src="../images/image_2.png"/>'
},
{
title: 'title card 3',
html: '<img src="../images/image_3.png"/>'
},
{
title: 'title card 4',
html: '<img src="../images/image_4.png"/>'
}
]
}],
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Locations</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnLocationsHome',
itemId: 'BtnLocationsHome',
text: 'Locations',
handler:function(){
Ext.getCmp('homePanel').setActiveItem('locationPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/services.png" align="left"/></span><span class="list_text">Services</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
itemId: 'BtnServices',
text: 'Services',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('servicesPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/downloads.png" align="left"/></span><span class="list_text">Downloads</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnDownloads',
itemId: 'BtnDownloads',
text: 'Downloads',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('downloadPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/promotions.png" align="left"/></span><span class="list_text">Promotions</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnPromotions',
itemId: 'BtnPromotions',
text: 'Promotions',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('promotionPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/coupons.png" align="left"/></span><span class="list_text">Coupons</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
itemId: 'BtnCoupons',
text: 'Coupons',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('couponPanel');
}
}
]
}
]},
/* home panel end */
/**************** location **********************/
{
xtype: 'panel',
id:'locationPanel',
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
items : [
{
xtype: 'panel',
items : [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: 'Locations',
items: [
{
xtype: 'button',
docked: 'left',
html: '<img src="../images/back_arrow.png"/>',
id: 'BtnBackLoc',
itemId: 'BtnBackLoc',
handler: function() {
Ext.getCmp('homePanel').setActiveItem(0);
//this.getParent().parent.setActiveItem('homePanel')
//Ext.getCmp('locationPanel').setActiveItem(0);
}
},
{
xtype: 'button',
docked: 'right',
html: '<img src="../images/home.png"/>',
id: 'LocationBtnHome',
handler: function() {
Ext.getCmp('homePanel').setActiveItem(0);
}
}
]
},
{
xtype: 'panel',
items: [
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Showrooms</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnShowroomLoc',
itemId: 'BtnShowroomLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('showroomPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Service Centers</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnServiceCenterLoc',
itemId: 'BtnServiceCenterLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('servicecenterPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Driving Schools</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnDriveLoc',
itemId: 'BtnDriveLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('drivingschoolPanel');
}
}
]
}
]
}
]
},
/* panel location end */