PDA

View Full Version : HOW TO IMPLEMENT a panel with DASHBOARD ON SENCHA ?



priya gupta
13 Dec 2011, 12:29 AM
HOW TO IMPLEMENT DASHBOARD ON SENCHA ?

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 I do this or tell me some other way to come out of it.

digeridoopoo
13 Dec 2011, 1:09 AM
Hi, I can help you but also there are many topics on this forum already with examples. Try searching for 'Facebook layout' or 'icon grid' or 'push 12 thumbnails per page' or 'multiple item carousel' that will be a good start.

priya gupta
13 Dec 2011, 1:22 AM
:)

digeridoopoo
13 Dec 2011, 1:33 AM
Also, maybe a good idea to only post the question once, maybe in the discussion of sencha touch 1 forums...this seems to be the most active part :-)

priya gupta
13 Dec 2011, 3:28 AM
On tab of one of the image I want a panel to be displayed with html but on tab it goes to panel but doesn't display html. I am not confirm whether it is going to next panel bcoz it displays a empty view with a toolbar on first view.


fn: function()
{
//rootPanel.setActiveItem(screens[this.id], { type: 'slide' } );
if(this.id=='profile'){

var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent: true,
html:"This is Panel for ITP"


});
}return false;

}

digeridoopoo
13 Dec 2011, 7:43 AM
Oh here is another tip, try posting the full code in the new Sencha Fiddle: http://senchafiddle.com/

That way people can see what is wrong and try and fix it.

:-)

priya gupta
13 Dec 2011, 8:09 PM
var toolbar = new Ext.Toolbar({
id : 't3',
title:'t',
layout : 'hbox',
xtype: 'pagingtoolbar',
items : [

{
itemId:'d',
text:'hello',
ui:'dark'
}

]
});




var dashboardCfg = {
defaultCls: 'dashboardButton',
cols: 3,
rows: 2,
title: 'Dashboard',
cells: [
{ id: 'profile', icon: 'btn1.png' },
{ id: 'friends', icon: '2.png' },
{ id: 'networks', icon: '3.png' },
{ id: 'search', icon: '4.png' },
{ id: 'messages', icon: '5.png' },
{ id: 'requests', icon: '6.png' }
],
tpl: '<img src="{icon}" width="90" height="100" /><span></span>'
};


// This is a custom method for making a dashboard:
var GridView = function(args)
{
var totalItems = args.cells.length;
var maxBtnsPerPane = args.cols * args.rows;
var noPanes = Math.ceil(totalItems / maxBtnsPerPane);
var panes = [];
var cellIndex = 0;
var showIndicator;

// Create the panes:
for(var i = 0; i < noPanes; i++)
{
panes[i] = new Ext.Panel({
title: 'Dashboard' + (i + 1),
layout: { type: 'vbox', align: 'stretch' },
pack: 'center',
defaults: { flex: 1 }
});

var thisCount = i + maxBtnsPerPane;

// Loop through how many rows we need:
for(var rowCount = 0; rowCount < args.rows; rowCount++)
{
var thisRow = new Ext.Panel({ layout: { type: 'hbox', align: 'stretch', pack: 'center' }, id: 'row' + (rowCount + 1), defaults: { flex: 1 } });

// Now we need to add the cells:
for(var colCount = 0; colCount < args.cols; colCount++)
{
var cellLabel, handlerFunc;

(cellIndex > (totalItems - 1)) ? cellLabel = '' : cellLabel = args.cells[cellIndex].label;

if(cellIndex < totalItems)
{
var thisCell = new Ext.Panel({
title: args.cells[cellIndex].label,
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
id: args.cells[cellIndex].id,
items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
listeners: { tap: {
element: 'el',
fn: function()
{
//rootPanel.setActiveItem(screens[this.id], { type: 'slide' } );
if(this.id=='profile'){ // I am showing a new panel when clicking on one of the image whoes id is profile.
alert("profile is clicked"); //This panel is not visible its not coming in front

var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent: true,
html:"This is Panel for ITP",
dockedItem:[toolbar]


});
alert(panel.isPanel);
panel.show();
alert("why");
}else{
alert("hello");}

}
} }
});
}
else
var thisCell = new Ext.Panel({ title: '' })

thisRow.add(thisCell);
cellIndex++;
}
panes[i].add(thisRow);
}
}

(noPanes == 1) ? showIndicator = false : showIndicator = true;

var gridview = new Ext.Carousel({
title: args.title,
items: panes,
indicator: showIndicator
});

return gridview;
};




var dashboard = new GridView(dashboardCfg);


MobileSbf.views.startUpToolbar = new Ext.Toolbar({
id: 'startUpToolbar',
title: 'Mobile SBF',
items: [
{ xtype: 'spacer' },
{
id: 'infoButton',
text: 'Info',
ui: 'action',
handler: function () {
MobileSbf.views.viewport.setActiveItem('infoContainer', { type: 'fade', direction: 'right' });
}
}
]
});


MobileSbf.views.infoToolbar = new Ext.Toolbar({
id: 'infoToolbar',
title: 'Infos',
items: [
{
id: 'backButton',
text: 'Home',
ui: 'back',
handler: function () {
MobileSbf.views.viewport.setActiveItem('startUpContainer', { type: 'fade', direction: 'right' });
}
},
{ xtype: 'spacer' }
]
});


MobileSbf.views.infoContainer = new Ext.Panel({
id: 'infoContainer',
layout: 'fit',
html: 'ProfeOfConcept',
dockedItems: [MobileSbf.views.infoToolbar]
});


MobileSbf.views.startUpContainer = new Ext.Panel({
id: 'startUpContainer',
layout: 'fit',
html: '',
dockedItems:[
MobileSbf.views.startUpToolbar
],
items:[
dashboard
]
});


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

items: [
MobileSbf.views.startUpContainer,
MobileSbf.views.infoContainer


]
});






not able to load a panel when clicking on image with id profile.

Nares
13 Mar 2012, 6:34 PM
Hi, Im a newBee on Sench Touch 2 and looking for a help on integrating Dashboard.js into my app. Besically, Im usring xtype:'dashbord' into a file SeachCountry.js, where xtype:'dashboard' is defined in the file "Dashboard.js"

File "Dashboard.js" as follows

Ext.define('iFleetMobile.view.Dashboard',{
extend : 'Ext.Container',
xtype:'dashboard',

//requires: [
// 'Ext.mixin.Observable'
//],

config : {
layout : 'fit',
},




dashboardCfg : {
defaultCls: 'dashboardButton',
cols: 3,
rows: 3,
title: 'Dashboard',
cells: [
{ id: 'profile', label: 'Profile', icon: 'resources/images/france.png'},
{ id: 'friends', label: 'Friends', icon: 'resources/images/france.png'},
{ id: 'networks', label: 'Networks', icon: 'resources/images/france.png'},
{ id: 'search', label: 'Search', icon: 'resources/images/france.png'},
{ id: 'messages', label: 'Messages', icon: 'resources/images/france.png'},
{ id: 'requests', label: 'Requests', icon: 'resources/images/france.png'},
{ id: 'map', label: 'Map', icon: 'resources/images/france.png'},
{ id: 'lock', label: 'Lock', icon: 'resources/images/france.png'},
{ id: 'settings', label: 'Settings', icon: 'resources/images/france.png'},
{ id: 'about', label: 'About', icon: 'resources/images/france.png'}
],
tpl: '<img src="{icon}" title="{label}" width="48" height="48" /><span>{label}</span>'
},




// This is a custom method for making a dashboard:
var GridView = function(args)
{
var totalItems = args.cells.length;
var maxBtnsPerPane = args.cols * args.rows;
var noPanes = Math.ceil(totalItems / maxBtnsPerPane);
var panes = [];
var cellIndex = 0;
var showIndicator;

// Create the panes:
for(var i = 0; i < noPanes; i++)
{
panes[i] = new Ext.Panel({
title: 'Dashboard' + (i + 1),
layout: { type: 'vbox', align: 'stretch' },
pack: 'center',
defaults: { flex: 1 }
});

var thisCount = i + maxBtnsPerPane;

// Loop through how many rows we need:
for(var rowCount = 0; rowCount < args.rows; rowCount++)
{
var thisRow = new Ext.Panel({ layout: { type: 'hbox', align: 'stretch', pack: 'center' }, id: 'row' + (rowCount + 1), defaults: { flex: 1 } });

// Now we need to add the cells:
for(var colCount = 0; colCount < args.cols; colCount++)
{
var cellLabel, handlerFunc;

(cellIndex > (totalItems - 1)) ? cellLabel = '' : cellLabel = args.cells[cellIndex].label;

if(cellIndex < totalItems)
{
var thisCell = new Ext.Panel({
title: args.cells[cellIndex].label,
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
id: args.cells[cellIndex].id,
items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
listeners: { tap: { element: 'el', fn: function() { rootPanel.setActiveItem(screens[this.id], { type: 'slide' } ); } } }
});
}
else
var thisCell = new Ext.Panel({ title: '' })

thisRow.add(thisCell);
cellIndex++;
}
panes[i].add(thisRow);
}
}

(noPanes == 1) ? showIndicator = false : showIndicator = true;

var gridview = new Ext.Carousel({
title: args.title,
items: panes,
indicator: showIndicator
});

return gridview;
};


var dashboard = new GridView(dashboardCfg);




And,
file "SeachCountry.js" is as follows:

Ext.define('iFleetMobile.view.SearchCountry',{
extend: 'Ext.Panel',
xtype:'SearchCountryView',


config:{
title:'Search',
iconCls:'search',
cls:'home',


fullscreen : true,
layout : 'fit',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background:#d8e2ef',
scrollable: true,
styleHtmlContent: true,


items: [
dashboard,
],

html: [
"iFleetMobile App.",
].join("")
}
});