HOW TO IMPLEMENT DASHBOARD ON SENCHA ?

[priya gupta]

Hi,

This is Priya, I am new to sencha touch and having problem in creating a dashboard for my application which will be my first view of the app. Dashboard must contain 6 plain images, 3 in 2 rows and on click of any of the image it should be redirected to new panel which contains list and further more.
I am stucked with this dashboard part.

Please help me how can do this or tell me some other way to come out of it.

[Sameer Khan]

Hi, I think you can use layout to display imges...If you use HTML tables it won't render properly on any device..

So Use like this :
{
xtype:'panel',
height:60,
layout:{
type:'hbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'add ur image1'
listeners:{
click:{
element:'el',//bind to the underlying el property on the panel
fn:function(){ //creation of obj for new Panel);
}
}
},{
flex: 1,
html: 'add ur image2',
listeners:{
click:{
element:'el',//bind to the underlying el property on the panel
fn:function(){ //creation of obj for new Panel);
}
} },{
flex: 1,
html: 'add ur image3',
listeners:{
click:{
element:'el',//bind to the underlying el property on the panel
fn:function(){ //creation of obj for new Panel);
}
} }]
}

I think it would be helpful for you..

[priya gupta]

Uncaught TypeError: Cannot read property 'isComponent' of undefined

I am trying with this code its giving me this error.


new Ext.Application({
name: 'app',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
useLoadMask: true,
launch: function(){



app.views.startUpContainer = new Ext.Panel({
id: 'startUpContainer',
layout: 'fit',
html: '',
dockedItems:[
app.views.startUpToolbar
],
items:[
{
xtype:'panel',
height:60,
layout:{
type:'hbox',
align: 'stretch'
},
items: [
{
flex: 1,
html: '<img src="btn1.png" width="90" height="100" />',
listeners:{
click:{
element:'el',// bind to the underlying el property on the panel
fn:function(){ // creation of obj for new Panel);
}
}
}
},
{
flex: 1,
html: '<img src="2.png" width="90" height="100" />',
listeners:{
click:{
element:'el',// bind to the underlying el property on the panel
fn:function(){ // creation of obj for new Panel);
}
}
}
},
{
flex: 1,
html: '<img src="3.png" width="90" height="100" />',
listeners:{
click:{
element:'el',// bind to the underlying el property on the panel
fn:function(){ // creation of obj for new Panel);
}
}
}
}]
}
]
});

app.views.viewport = new Ext.Panel({
fullscreen: 'true',
layout: 'card',
cardAnimation: 'slide',

items: [
app.views.startUpContainer
]
});








}
});