1. #1
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default Design question

    Design question


    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:
    Foto(2).PNG

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

    Foto(3).PNG

    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..

  2. #2
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    Is it just because of my kind of question or why does nobody really answer questions regarding to a picker component...?

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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.


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

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Just a quick work around,

    Code:
    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();
                    }
                }
            });
        }
    });

  5. #5
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    mate, u are awesome.

    thanks, exactly what I needed!

  6. #6
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    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:

    PHP Code:
    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..

  7. #7
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    -1
    Riaz is an unknown quantity at this point

      0  

    Default


    Could you tell me how can I get selected value when I click done button?

    Code:
    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();

Similar Threads

  1. Combo design question
    By Remy in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 21 Nov 2008, 10:19 AM
  2. OOP Design Question
    By brookd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 27 Nov 2007, 7:55 AM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar