helloaccp
4 Jan 2011, 5:43 PM
The same page intermadite has two panel(Sencha Touch 1.0.1 list does not support dockedItems)The second panel put the first to give panel to cover!
The first panel ,The HTML code is as follows:
var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
/**
* The items includes in the index panel.
*
*/
items: [chla.contact,chla.nurseunits,chla.Schedule,chla.favorites,chla.more, chla.search, chla.nurseunitDetail, chla.careGiveres, chla.careGiverMember, chla.deptOnCallDetail,chla.contactDetails,chla.emailPanel,chla.phonePanel,chla.IMPanel,chla.userprofile,chla.deptDetail,chla.careGiveresd],
dockedItems:
[{
items:[{
text: 'Back',
ui: 'back',
hidden:true,
/**
* When back to preview screen,need press this button.
* @type string
*/
handler: function() {
var card = activeItems.pop();
panel.setActiveItem(card,{type: 'slide', direction: 'right'});
var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(titleItems.pop());
if(activeItems.length<=0){this.hide();}
}
}]
},
/**
* The definition of the bottom tabbar.
*
*/
{
xtype: 'tabbar',
dock: 'bottom',
align:'center',
layout: {
pack: 'center'
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
/**
* The bottom tabbar,include all of the icons.
* @public
*
*/
items: [
{
iconCls: 'user',
text:"Patients",
handler:menuHandler
},{
iconCls: 'time',
text:"On Call",
handler:menuHandler
}, {
iconCls: 'team',
text: 'Physicians',
handler:menuHandler
}, {
iconCls: 'favorites',
text:"Favorites",
handler:menuHandler
}, {
iconCls: 'more',
text: 'More',
handler:menuHandler
}]
}]
});
The two panel ,The HTML code is as follows:
var contactPanel=new Ext.Panel({
fullscreen: true,
dockedItems : [{
xtype: 'toolbar',
dock: 'top',
title:'On Call Providers'
},
{
xtype: 'toolbar',
align:'center',
layout: {
pack: 'center'
},
/**
* The definition of the bottom toolbar,including two option button.
* @member
*/
items: [{
xtype: 'segmentedbutton',
items: [{
text: 'Teams',
pressed : true,
id:'seg1',
/**
* Invoke the webservice and display the returning data in current screen.
* @private
*/
handler: function() {
Ext.getBody().mask(false, '<div class="demos-loading">Loading…</div>');
Ext.Ajax.request({
url: domain + 'mPageService.svc/getAllTeamsJson_GET',
form:'post_form',
method:'GET',
params: {},
success: function(response, opts){
alert("enter team success:"+response.responseText);
var obj = Ext.decode(response.responseText);
var rootNode=getRootObj(obj);
groupingBaseContact.store.loadData(rootNode);
Ext.getBody().unmask();
},
failure: function(response, opts) {
Ext.Msg.alert('Sorry', 'Bad Request !');
panel.setActiveItem(chla.contact,{type: 'slide',
direction: 'left'});
}
});
}
}, {
text: 'Clinical Divisions',
/**
* Invoke webservice and display the returning data in current screen.
* @private
*/
handler: function() {
Ext.getBody().mask(false, '<div class="demos-loading">Loading…</div>');
Ext.Ajax.request({
url: domain + 'mPageService.svc/getDeptsJson_GET',
form:'post_form',
method:'GET',
params: {},
success: function(response, opts) {
alert("enter Clinical success:"+response.responseText);
var obj = Ext.decode(response.responseText);
var rootNode=getRootObj(obj);
groupingBaseContact.store.loadData(rootNode);
Ext.getBody().unmask();
},
failure: function(response, opts) {
Ext.Msg.alert('Sorry', 'Bad Request !');
panel.setActiveItem(chla.contact,{type:
'slide', direction: 'left'});
}
});
}
}]
}],
dock: 'bottom'
}]
});
The first panel ,The HTML code is as follows:
var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
/**
* The items includes in the index panel.
*
*/
items: [chla.contact,chla.nurseunits,chla.Schedule,chla.favorites,chla.more, chla.search, chla.nurseunitDetail, chla.careGiveres, chla.careGiverMember, chla.deptOnCallDetail,chla.contactDetails,chla.emailPanel,chla.phonePanel,chla.IMPanel,chla.userprofile,chla.deptDetail,chla.careGiveresd],
dockedItems:
[{
items:[{
text: 'Back',
ui: 'back',
hidden:true,
/**
* When back to preview screen,need press this button.
* @type string
*/
handler: function() {
var card = activeItems.pop();
panel.setActiveItem(card,{type: 'slide', direction: 'right'});
var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(titleItems.pop());
if(activeItems.length<=0){this.hide();}
}
}]
},
/**
* The definition of the bottom tabbar.
*
*/
{
xtype: 'tabbar',
dock: 'bottom',
align:'center',
layout: {
pack: 'center'
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
/**
* The bottom tabbar,include all of the icons.
* @public
*
*/
items: [
{
iconCls: 'user',
text:"Patients",
handler:menuHandler
},{
iconCls: 'time',
text:"On Call",
handler:menuHandler
}, {
iconCls: 'team',
text: 'Physicians',
handler:menuHandler
}, {
iconCls: 'favorites',
text:"Favorites",
handler:menuHandler
}, {
iconCls: 'more',
text: 'More',
handler:menuHandler
}]
}]
});
The two panel ,The HTML code is as follows:
var contactPanel=new Ext.Panel({
fullscreen: true,
dockedItems : [{
xtype: 'toolbar',
dock: 'top',
title:'On Call Providers'
},
{
xtype: 'toolbar',
align:'center',
layout: {
pack: 'center'
},
/**
* The definition of the bottom toolbar,including two option button.
* @member
*/
items: [{
xtype: 'segmentedbutton',
items: [{
text: 'Teams',
pressed : true,
id:'seg1',
/**
* Invoke the webservice and display the returning data in current screen.
* @private
*/
handler: function() {
Ext.getBody().mask(false, '<div class="demos-loading">Loading…</div>');
Ext.Ajax.request({
url: domain + 'mPageService.svc/getAllTeamsJson_GET',
form:'post_form',
method:'GET',
params: {},
success: function(response, opts){
alert("enter team success:"+response.responseText);
var obj = Ext.decode(response.responseText);
var rootNode=getRootObj(obj);
groupingBaseContact.store.loadData(rootNode);
Ext.getBody().unmask();
},
failure: function(response, opts) {
Ext.Msg.alert('Sorry', 'Bad Request !');
panel.setActiveItem(chla.contact,{type: 'slide',
direction: 'left'});
}
});
}
}, {
text: 'Clinical Divisions',
/**
* Invoke webservice and display the returning data in current screen.
* @private
*/
handler: function() {
Ext.getBody().mask(false, '<div class="demos-loading">Loading…</div>');
Ext.Ajax.request({
url: domain + 'mPageService.svc/getDeptsJson_GET',
form:'post_form',
method:'GET',
params: {},
success: function(response, opts) {
alert("enter Clinical success:"+response.responseText);
var obj = Ext.decode(response.responseText);
var rootNode=getRootObj(obj);
groupingBaseContact.store.loadData(rootNode);
Ext.getBody().unmask();
},
failure: function(response, opts) {
Ext.Msg.alert('Sorry', 'Bad Request !');
panel.setActiveItem(chla.contact,{type:
'slide', direction: 'left'});
}
});
}
}]
}],
dock: 'bottom'
}]
});