PDA

View Full Version : Help me debug this code



Sunforever0220
16 Mar 2011, 4:45 PM
I once put the 3 buttons(not toolbar ones) into one item list and it could be shown on safari. But when I separate the 3 buttons into different panels it doesn't show out. Can anyone point out the problems for this case exactly?

Here is the code in the .js file.
Ext.setup({
tabletStartupScreen: 'image/tablet_startup.png',
phoneStartupScreen: 'image/phone_startup.png',
icon: 'image/icon.png',
glossOnIcon: false,
onReady: function () {

var buttonsSpecTop = [
{ ui: 'back', text: 'Back' },
{ xtype: 'spacer' },
]

var DRButton = [

{
xtype: "button",
ui: "confirm",
text: "Daily Rest Analysis"
}
]

var MMButton = [
{
xtype: "button",
ui: "forward",
text: "Multi-Manning Daily Rest"
}
]

var BTButton = [
{
xtype: "button",
ui: "forward",
text: "Break Timer"
}
]


var buttonsSpecBottom = [
{ ui: 'confirm', text: 'Exit' },
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]

var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}

var InputTapHandler = function(btn, evt) {
parent.location='input time.html';
}

var BreakTapHandler = function(btn, evt) {
parent.location='Break Timer.html';
}

var dockedItems = [{
xtype: 'toolbar',
title: 'Drivers Hours',
ui: 'dark',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
},

//
//items: [
{
xtype: 'panel',
dock: 'top',
//layout: "vbox",
items: DRButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'panel',
dock: 'center',
//layout: "vbox",
items: MMButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'panel',
dock: 'bottom',
//layout: "vbox",
items: BTButton,
defaults: { handler: BreakTapHandler }
},


{
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
}
]


new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
dockedItems: dockedItems

});

}
})

Also the startup images are not available to be shown when testing on safari.

Riaz
16 Mar 2011, 5:53 PM
Did you say like that -




Ext.setup({
tabletStartupScreen: 'image/tablet_startup.png',
phoneStartupScreen: 'image/phone_startup.png',
icon: 'image/icon.png',
glossOnIcon: false,
onReady: function () {

var buttonsSpecTop = [
{ ui: 'back', text: 'Back' },
{ xtype: 'spacer' },
]

var DRButton = [

{
xtype: "button",
ui: "confirm",
text: "Daily Rest Analysis"
}
]

var MMButton = [
{
xtype: "button",
ui: "forward",
text: "Multi-Manning Daily Rest"
}
]

var BTButton = [
{
xtype: "button",
ui: "forward",
text: "Break Timer"
}
]


var buttonsSpecBottom = [
{ ui: 'confirm', text: 'Exit' },
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]

var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}

var InputTapHandler = function (btn, evt) {
parent.location = 'input time.html';
}

var BreakTapHandler = function (btn, evt) {
parent.location = 'Break Timer.html';
}

var dockedItems = [{
xtype: 'toolbar',
title: 'Drivers Hours',
ui: 'dark',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
}]

//
//


new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
dockedItems: dockedItems,


items: [
{
xtype: 'panel',
dock: 'top',
//layout: "vbox",
items: DRButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'panel',
dock: 'center',
//layout: "vbox",
items: MMButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'panel',
dock: 'bottom',
//layout: "vbox",
items: BTButton,
defaults: { handler: BreakTapHandler }
},


{
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
}
]


});

}
})

Sunforever0220
16 Mar 2011, 6:24 PM
Did you say like that -
Yes something similar like that. But in this way the 3 buttons might be too closed to each other. Is there a better way to adjust the space between the buttons (to make the UI look better)? Thanks

Riaz
16 Mar 2011, 7:49 PM
What about the following code?




Ext.setup({
tabletStartupScreen: 'image/tablet_startup.png',
phoneStartupScreen: 'image/phone_startup.png',
icon: 'image/icon.png',
glossOnIcon: false,
onReady: function () {


var buttonsSpecTop = [{ ui: 'back', text: 'Back' }
,
{ xtype: 'spacer' },
]


var DRButton = [{
xtype: "button",
ui: "confirm",
text: "Daily Rest Analysis"
}
]

var MMButton = [
{
xtype: "button",
ui: "forward",
text: "Multi-Manning Daily Rest"
}
]

var BTButton = [
{
xtype: "button",
ui: "forward",
text: "Break Timer"
}
]


var buttonsSpecBottom = [
{ ui: 'confirm', text: 'Exit' },
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]

var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}

var InputTapHandler = function (btn, evt) {
parent.location = 'input time.html';
}

var BreakTapHandler = function (btn, evt) {
parent.location = 'Break Timer.html';
}



var dockedItems = [{
xtype: 'toolbar',
title: 'Drivers Hours',
ui: 'dark',
dock: 'top',
items: [buttonsSpecTop],
defaults: { handler: tapHandler }

},
{
xtype: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
xtype: 'panel',
// dock: 'top',
//layout: "vbox",
items: DRButton,
defaults: { handler: InputTapHandler }


},

{
xtype: 'panel',
// dock: 'center',
//layout: "vbox",
items: MMButton,
defaults: { handler: InputTapHandler }


},

{
xtype: 'panel',
dock: 'bottom',
layout: "vbox",
items: BTButton,
defaults: { handler: BreakTapHandler }

} ]

}, {
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
}]




new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
dockedItems: dockedItems



});

}
})

Sunforever0220
17 Mar 2011, 4:51 AM
The effect is not what I desired....Originally I wished to put the buttons vertically on the main panel (not a toolbar style) with a nice layout. I have a screenshot of the effect (in attachment), but need to adjust the spaces between the 3 buttons.
Also the app icon, start-up image and the icons on the toolbar at the bottom aren't shown out...25199
My code:

Ext.setup({
tabletStartupScreen: 'image/tablet_startup.png',
phoneStartupScreen: 'image/phone_startup.png',
icon: 'image/icon.png',
glossOnIcon: false,
onReady: function () {

var buttonsSpecTop = [
{ ui: 'back', text: 'Back' },
{ xtype: 'spacer' },
]

var DRButton = [

{
xtype: "button",
ui: "confirm",
text: "Daily Rest Analysis"
}
]

var MMButton = [
{
xtype: "button",
ui: "forward",
text: "Multi-Manning Daily Rest"
}
]

var BTButton = [
{
xtype: "button",
ui: "forward",
text: "Break Timer"
}
]


var buttonsSpecBottom = [
{ ui: 'confirm', text: 'Exit' },
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]

var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}

var InputTapHandler = function(btn, evt) {
parent.location='input time.html';
}

var BreakTapHandler = function(btn, evt) {
parent.location='Break Timer.html';
}

var dockedItems = [{
xtype: 'toolbar',
title: 'Drivers Hours',
ui: 'dark',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
},

//
//items: [
{
xtype: 'panel',
dock: 'top',
//layout: "vbox",
items: DRButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'panel',
dock: 'center',
//layout: "vbox",
items: MMButton,
defaults: { handler: InputTapHandler }
},

{
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
},

{
xtype: 'panel',
dock: 'bottom',
//layout: "vbox",
items: BTButton,
defaults: { handler: BreakTapHandler }
}

]


new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
dockedItems: dockedItems

});

}
})



What about the following code?




Ext.setup({
tabletStartupScreen: 'image/tablet_startup.png',
phoneStartupScreen: 'image/phone_startup.png',
icon: 'image/icon.png',
glossOnIcon: false,
onReady: function () {


var buttonsSpecTop = [{ ui: 'back', text: 'Back' }
,
{ xtype: 'spacer' },
]


var DRButton = [{
xtype: "button",
ui: "confirm",
text: "Daily Rest Analysis"
}
]

var MMButton = [
{
xtype: "button",
ui: "forward",
text: "Multi-Manning Daily Rest"
}
]

var BTButton = [
{
xtype: "button",
ui: "forward",
text: "Break Timer"
}
]


var buttonsSpecBottom = [
{ ui: 'confirm', text: 'Exit' },
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]

var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}

var InputTapHandler = function (btn, evt) {
parent.location = 'input time.html';
}

var BreakTapHandler = function (btn, evt) {
parent.location = 'Break Timer.html';
}



var dockedItems = [{
xtype: 'toolbar',
title: 'Drivers Hours',
ui: 'dark',
dock: 'top',
items: [buttonsSpecTop],
defaults: { handler: tapHandler }

},
{
xtype: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
xtype: 'panel',
// dock: 'top',
//layout: "vbox",
items: DRButton,
defaults: { handler: InputTapHandler }


},

{
xtype: 'panel',
// dock: 'center',
//layout: "vbox",
items: MMButton,
defaults: { handler: InputTapHandler }


},

{
xtype: 'panel',
dock: 'bottom',
layout: "vbox",
items: BTButton,
defaults: { handler: BreakTapHandler }

} ]

}, {
xtype: 'toolbar',
ui: 'dark',
dock: 'bottom',
items: buttonsSpecBottom,
defaults: { handler: tapHandler }
}]




new Ext.Panel({
id: 'buttonsPanel',
fullscreen: true,
dockedItems: dockedItems



});

}
})