PDA

View Full Version : Blank page for first click on button



amarjitsingh
11 Jan 2011, 12:12 PM
Hi Guys,

I am new to Sencha Touch. I am trying to build a simple application with few buttons. Data for some of them is in xml format and i want to display it as list. So i wrote some thing like(see below).

I was not sure how i can attached the new list for each tab, so i tried to build the panel again for each button click. Although it is working but i am getting blank page (one time) for each click on any other button after i click second button(Offices). So to get data i have to double click it, still you can see a blank page for short time then data. Look like for one click it take the list of the panel then for next click paste the new data. I tried couple of things but ...

any idea what is wrong here?

My code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'logo3.png',
glossOnIcon: false,


onReady : function() {








data = {
text: 'Regions',
items : [{
text : 'North America'},
{
text : 'United Kingdom'

},
{
text : 'Continental Europe'
},
{
text : 'Asia'
}
]

}







Ext.regModel('ListItem', {
fields : [{
name : 'text',
type : 'string'
}]
});

var regions = new Ext.data.Store({
model : 'ListItem',
// root : data,
data:[{text : 'North America'},
{text : 'United Kingdom'},
{text : 'Continental Europe'},
{text : 'Asia'}]




});


var regionList= new Ext.List({
itemTpl : '{text}',
store : regions,
centered : false,


});



/**

*Region Handler

*/

var regionHandler = function(button, event) {
new Ext.Panel({
fullscreen : true,
id : 'toolbartxt1',
style : "background-color:#fed;",
scroll : 'vertical',
items :regionList,// nestedList,
dockedItems : dockedItems,
layout: 'card',

})

};




/*
*
* Office handler
*/

var officeHandler = function(button, event) {
new Ext.Panel({
fullscreen : true,
id : 'toolbartxt1',
style : "background-color:#fed;",
scroll : 'vertical',
items : offices.show(),
dockedItems : dockedItems,
layout : 'card',

})

};



var pSearchHandler= function(button,event){

new Ext.Panel({

fullscreen: true,
dockedItems : dockedItems,
scroll : 'vertical',
xtype:'form',
items:[{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}

]

});

};



/*
*
* Office Data
*
*
*/




Ext.regModel('mydata', {
fields : [{
name : 'cityNameKey'
}, {
name : "country"
},
{name:'longitudeKey'
},
{name:'latitudeKey'
}
]
});

mystoreK = new Ext.data.Store({
model : 'mydata',
sorters : 'cityNameKey',
proxy : {
type : 'ajax',
url : 'TestData_Offices.xml',
// url: 'http://.../TestData.xml',
reader : {
type : 'xml',
root : 'data',
record : 'dict'
}
},
autoLoad : true
});

var offices = new Ext.List({
floating : true,
singleSelect : true,

itemTpl : '{cityNameKey} {country}{latitudeKey}',
store : mystoreK,
centered : false,
onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Under construction and will provide more info for ' + record.get('cityNameKey'));

}
}

});





/*
* root panel toolbar
*
*
*/




var buttonsGroup1 = [{
text : 'Regions',
ui : 'round',
handler : regionHandler,
style : "color:#7ed;"

}, {
text : 'Offices',
ui : 'round',
handler : officeHandler,
style : "color:#7ed;"
}, {
text : 'Search',
ui : 'round',
handler : pSearchHandler
}

];





/*
* Docked item for toobars
*
*
*/
var dockedItems = [

{
xtype : 'toolbar',
dock : 'top',
items : buttonsGroup1,
ui:'light'
}
];







/**
*
*
* Home page panel
*
*
*/

new Ext.Panel({
fullscreen : true,
id : 'mainPanel',
style : "background-color:#fed;",
scroll : 'vertical',
layout: 'card',
dockedItems : dockedItems,
html : ' <br>Welcome to GeoKeane.</br>',

})



}
});