PDA

View Full Version : Design question



chrizmaster
28 Dec 2010, 2:13 AM
Hi there,

our (german) customer have a iPhone application which should be redone as a web-application. This is the current iPhone Application, which is pretty straight forward:
23991

And this is my first try building a sencha touch application. (The big round thing in the middle is painted via canvas element...)

23992

As you can see, it looks different. Isn't there a possibility, to use such a picker as you can see in the iPhone application. A picker which is ALWAYS visible and not only as an overlay...

Thanks
Christian

PS: The canvas (as well as the whole web application) is a work in progress, so yeah, the canvas looks a bit ugly atm.. ;)

chrizmaster
28 Dec 2010, 11:18 AM
Is it just because of my kind of question or why does nobody really answer questions regarding to a picker component...?

tomalex0
28 Dec 2010, 8:53 PM
How about you having two panel inside vbox layout one for Meter and other for Picker and show picker always in the second panel.
And hide toolbar of picker.



new Ext.Panel({
fullscreen:true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'Meter Panel'
},{
flex: 2,
html: 'Picker Panel'
}]
});

tomalex0
28 Dec 2010, 9:36 PM
Just a quick work around,



var picker1 = new Ext.Picker({
doneButton :false,
modal:false,
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});

var picker2 = new Ext.Picker({
doneButton :false,
modal:false,
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
new Ext.Panel({
fullscreen:true,
scroll:false,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 2.5,
scroll:'vertical',
html: 'Meter Here'
},{
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items:[
{flex:1,items:[picker1]},
{flex:1,items:[picker2]}
]
}],
listeners:{
afterrender:function(){
picker1.show();
picker1.getDockedComponent(0).destroy();
picker2.show();
picker2.getDockedComponent(0).destroy();
}
}
});
}
});

chrizmaster
29 Dec 2010, 3:24 AM
mate, u are awesome.

thanks, exactly what I needed!

chrizmaster
29 Dec 2010, 4:00 AM
one more question:

is there a possibility to set a html string (a little icon with a little text) where the done and cancel button wereplaced before? The frames of the pickers are very big and because the cancel and done button were removed, there would be enough space for adding some text..

Thanks!

Edit:

Maybe I've found a solution. I've modified your code like this:



listeners:{
afterrender:function(){
picker1.show();
picker1.getDockedComponent(0).removeAll();
picker1.getDockedComponent(0).el.dom.innerText="test";
picker2.show();
picker2.getDockedComponent(0).removeAll();
picker2.getDockedComponent(0).el.dom.innerText="test 2";
}
}


No it shows my titles... Don't know whether this is a good solution, but.. it works.. :)

chrizmaster
29 Dec 2010, 10:28 AM
alright mate, I have an issue here which Iam not able to find a solution for.. When I open the page on my phone, it looks very good. When I turn my phone in landscape mode, the design seems to be destroyed. The picker will be placed somewhere on the screen...

It would be fine if I could tell the browser that this (web)application is only permitted to run in portrait mode, but I don't think this is possible is it?

Christian

Riaz
29 Mar 2011, 6:38 PM
Could you tell me how can I get selected value when I click done button?




var picker = new Ext.Picker({
slots: [{
name: 'ProjectPicker',
title: 'ProjectPicker',
data: [{ text: 'Project01', value: 'Project01' },
{ text: 'Project02', value: 'Project02' },
{ text: 'Project03', value: 'Project03' },
{ text: 'Project04', value: 'Project04'}]
}],


doneButton: {
text: 'Done',
handler: function () {
var SelectedValue = ???????????; //need code for selected text
alert(electedValue);
}
}


});
picker.show();