Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    4
    abierbaum is on a distinguished road

      0  

    Question How to create something like iPhone settings menu?

    How to create something like iPhone settings menu?


    How would I create a GUI like this using Sencha Touch?



    It is something like a set of lists but each item behaves more like a button that brings up a new panel. I have created something like it where I have a panel with a card layout and a set of buttons. When the user clicks a button, the active item of the panel is switched to whatever subpanel should be displayed. But the buttons don't look right because they need to group together and look more like a list.

    Am I going about this all wrong? (note: I thought about using a NestedList, but that just doesn't match up correctly. I don't have hierarchical data, I have button groups that load panels)

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    767
    Vote Rating
    23
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Interesting question.

    I would probably try to use the List and arrange them via the vbox layout vertically. Then add the icons via CSS/itemTpl and round the corners of each List via CSS as well.
    To make the click action work, I would add automatically a class to each item with the items value, such as class="sounds" and add a click listener to the list and check the class name of the target element and depending on the class name switch to the correct card.

    That's just my idea for now.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    4
    abierbaum is on a distinguished road

      0  

    Default


    I was thinking of doing is similarly but thought I must be missing something simple. It seems like a great deal of overhead for something so simple. All I really want to do is say "Give me a group of buttons with this text and these icons.". This may be a good place for a nice little extension to make this simple since I have to think other people would want to do something similar to this as well.

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    4
    abierbaum is on a distinguished road

      0  

    Default


    I am still wondering about this one. Is there any easier way to do this? I think I am going to want to do this over and over and would like to find a nice simple way to create a "panel" that is stylized like this and add content to it.

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


    Hi,

    I have tried to make a simple extension to for the layout you shown.I used List and using grouping property.

    Base js
    Code:
    Ext.SettingsPanel = Ext.extend(Ext.List, {
            groupTpl : [
            '<tpl for=".">',
                '<div class="x-list-group x-group-{id}">',,
                    '<h3 class="x-list-header x-settings-header" ></h3>',
                    '<div class="x-list-group-items">',
                        '{items}',
                    '</div>',
                '</div>',
            '</tpl>'
    	]
    });
    
    Ext.reg('settingspanel',Ext.SettingsPanel);
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
                Ext.regModel('settingsModel', {
                    fields: ['section', 'type','childpanel']
                });
    
                var settingsStore = new Ext.data.JsonStore({
                    model  : 'settingsModel',
                    getGroupString : function(record) {
                        return record.get('type');
                    },
                    data: [
                        {"section":"Airplane Mode","type":"network","childpanel" : "bookSettingsPanel","icon":'data:image/png;base64,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'},
                        {"section":"Wifi","type":"network","childpanel" : "bookServiceGroupsPanel","icon":'data:image/png;base64,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'},
                        
                        {"section":"Sound","type":"utility","childpanel" : "sellSetingsPanel","icon":'data:image/png;base64,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'},
                        {"section":"Brightness","type":"utility","childpanel" : "sellVendorPanel","icon":'data:image/png;base64,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'},
                        {"section":"Wallpaper","type":"utility","childpanel" : "sellProductGroupsPanel","icon":'data:image/png;base64,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'}
                    ]
                });
                var settingsBasePanel =  new Ext.Panel({
                    layout:{
                        type:'vbox',
                        align:'stretch'
                    },
                    baseCls: 'blackback',
                    fullscreen:true,
                    scroll:'vertical',
                    items: [{
                        fullscreen:true,
                        scroll:false,
                        xtype: 'settingspanel',
                        cls:'settingscls',
                        grouped     : true,
                        indexBar    : false,
                        singleSelect: true,
                        onItemDisclosure: true,
                        store:settingsStore,
                        itemTpl: '<tpl for="."><div ><img src ="{icon}" class="icon" /><strong>{section}</strong></div></tpl>',
                        listeners:{
                            itemtap : function(dataview,index,item,e){
                                console.log(dataview.store.getAt(index).data.childpanel);
                            }
                        }
                    }]
                });
                var baseSettingsPanel = new Ext.Panel({
                    layout:'card',
                    scroll:false,
                    fullscreen:true,
                    items:[settingsBasePanel]
                });
        }
    });
    Css

    HTML Code:
    <style type="text/css">
           .blackback{
                -webkit-background-size: 0.438em 100%;
                background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#C5CCD4), color-stop(0.71, #C5CCD4), color- stop(0.72, #CBD2D8), to(#CBD2D8));
                background-color:black;
            }
            .settingscls{
                background:transparent;
            }
            .settingscls  .x-list-header{
              background-image:none  ;
              background-color:transparent;
              border:none;
              -webkit-box-shadow:none;
              text-shadow: #000 0 1px 1px;
            }
            .settingscls .x-list-group-items,.coachlist_items .x-list-group-items{
                 padding:1em 1em 0em 1em;
                 text-shadow: #fff 0 1px 1px;
            }
            .settingscls,.coachlist_items{
                 padding-top:20px !important;
            }
            
            .settingscls .x-list-group-items :first-child, .coachlist_items .x-panel-body :first-child{
                 -webkit-border-top-left-radius: 0.4em ;
                 -webkit-border-top-right-radius: 0.4em;
            }
            
            .settingscls .x-list-group-items :last-child, .coachlist_items .x-panel-body :last-child{
                 -webkit-border-bottom-left-radius: 0.4em;
                 -webkit-border-bottom-right-radius: 0.4em;
            }
           .settingscls .x-list-disclosure{
            width: 10px;
            height: 13px;
            margin-top:0.6em;
            right:1em !important;
            -webkit-mask:none;
            -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');
            }
            .settingscls .x-list-item{
                background:white;
            }
            .icon{
              margin-right:20px;
              vertical-align:middle;
            }
        </style>
    You could do in a better way by using baseCls for settingspanel. Hope this would help you

  6. #6
    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 This is how it looks

    This is how it looks


    settings.png

  7. #7
    Ext User
    Join Date
    Aug 2010
    Posts
    10
    Vote Rating
    0
    voidnothings is on a distinguished road

      0  

    Default


    Quote Originally Posted by tomalex0 View Post
    Hi,

    I have tried to make a simple extension to for the layout you shown.I used List and using grouping property.

    Base js
    Code:
    Ext.SettingsPanel = Ext.extend(Ext.List, {
            groupTpl : [
            '<tpl for=".">',
                '<div class="x-list-group x-group-{id}">',,
                    '<h3 class="x-list-header x-settings-header" ></h3>',
                    '<div class="x-list-group-items">',
                        '{items}',
                    '</div>',
                '</div>',
            '</tpl>'
    	]
    });
    
    Ext.reg('settingspanel',Ext.SettingsPanel);
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
                Ext.regModel('settingsModel', {
                    fields: ['section', 'type','childpanel']
                });
    
                var settingsStore = new Ext.data.JsonStore({
                    model  : 'settingsModel',
                    getGroupString : function(record) {
                        return record.get('type');
                    },
                    data: [
                        {"section":"Airplane Mode","type":"network","childpanel" : "bookSettingsPanel","icon":'data:image/png;base64,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'},
                        {"section":"Wifi","type":"network","childpanel" : "bookServiceGroupsPanel","icon":'data:image/png;base64,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'},
                        
                        {"section":"Sound","type":"utility","childpanel" : "sellSetingsPanel","icon":'data:image/png;base64,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'},
                        {"section":"Brightness","type":"utility","childpanel" : "sellVendorPanel","icon":'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAgCAMAAADdXFNzAAAAA3NCSVQICAjb4U/gAAACmlBMVEX///8wGzIIBQgAAABaV1xRSlMAAABaV1xVSlhRSlNPQ1NNP1JIOE1CL0hHI0xDHkk+G0U0HTY6F0MwEDooCDRVSlhPQ1NNP1JIOE1CL0hHI0xDHkk4IUA+G0U6F0MwEDooCDSMhI6MhI6ooKoAAACqoaswGzK0rbgwGzK0rbgnFSgwGzJQMVJOMFFMK05JKUvj3Obg1+Td0+DYztyQUZWLS5P////39fj27/fw7PL05/Xx5fTt5e7v4vTp2O3u1e/g1+Td0+DdzuDnyurYztzdy+fdyeHmw+jXx9zUxtjgvufPw9Xku+bYvd3iueXOvtPMvdHdtuHHuc7ast7eruLWrtzGs83CtMjErsvZpd3CrMjEqcu9q8XPn929pcW4o7/Fm8vPltu8ncS1nb3TktjIlNHAlMfIkNmwmbfSjNjOitSwlLqtlbXVhtu9jcXEi8zTg9nIhdbGhsyziru/hcisjLWli67Pe9XGfMy1gr3Desm/fMiohLPMd9Okg63CdMnFcs6+csWzdr2pebLCbsjEbc6ie6u8a8W4a7+edarDYMu+YsW2ZL6zZbnDXcqjaK+rZLq9XcSdaaqvYbeWaqOfZqy9Wr2zXLuSZ564V8i9VMasWbWoWbK1U8aPY5uTYqGoVbq9TMa0Tb6tULaNXJykUrSaVauxS8ajUKysS7i6RMWmS7KaTqSkSrCtQsOeSaudSaiXS6KzPb6mQbO3OsOTR56vO8GLS5OYRKWoO72URJ+fPq6SQKGbOrerM76PP5ypNLalMsOUOaSNO52jML+tKb2kKsGFN5SSMKWJM52ENJZ1OIl+L5OdIryMJ7GZIbiBKZqIJqGHJKp/Jpt3KYxvKYWCIKB9IpZ/H5tzIo1sIIRwGZBuG4hkGntlI0gpAAAANnRSTlMAERERIiIiMzMzMzMzMzMzMzMzMzNERERERERERERERERVZnd3iIiZmaq7zN3d3d3u7u7u7u7G53I1AAAACXBIWXMAAArwAAAK8AFCrDSYAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M0BrLToAAAAvlJREFUKFNtwUtPnFUAgOH3XL5zztxgoANysYU6AlZjYo3VNE1M3DSuXfrX3DSuS9j0H9TarSaSSCRcBGoRhtvMN9/tXPwDPo8A9LCbgASQZAIQJDk9qEDAcM1YwBMh+QxAah9NHk7/QvNww0kAqGUUyCgjWYoWm4lwoPk6iSQgEWUkgYwYWVlTW2aeHOosGYjIKKqsiR4wXkRsYxBZ7bTSCohIma7yAKDcXGUbEFborhauXQC1mf4TZFvbWJR5Madzi9OtQmjRarfvPPrySi73iEi4vhyVs9G0eiKhBTBDMb4yQ6ro0eh7c0e5WrIzjiSkmOub1FPv1WaqonaO+rqU62os503ECi16tKt4lB4RlDmtQ0wkJzf+PF0oOosISWe2O8Ok/4HOsv60DgmyvlztT5r+YhukHnbl/IhPWjOD2Z60g7WnzvQGcp27bhR9pdVmeXQ7EoNkkzU8WShbf2Dgw99HvfbGvNbgttILNfzblI0hlY0Do9RAVc+kBp0CSSb5+VqeV/bVvWW//rr9Zd5Z+DmJGpKmxjs3vrAdl7XkwiPGk/sDp66bfgyARqDT8vnJ+tTt/1KTXr6N3JbuJC41NKApCOnT396s+/0XHnH2NvJgOnVv2CqEJ8kUIvVnbvecC8+DPo8Xv9sYcbrrtsZ1jKjWj6mZ1mr/3WZ7ZfhNfrn51VweutvX3z6YasK2jKXP8/KL1eNX4v7KaML50Tlu53j1cYn3FTLdjOhQPu/t7fzrlffY7mhnr/e8Dh3Z+KhT1auKSTP5/tezl6trs6Z+f3wWl57WZVZmNEnjCk/KBc8Odk9OAGhtbPnGI4oMNBc9JnfW3TYfrby7Hje2M7fSTGYaPZ70mxu0EhNuTasgy4uFFa8bqmlG0xkNuOl2C1WffVxaV9ZC1DEr8xB0EJ0YVOu2VV7/dKjjnShEncDHDIyMUlKbejKvL+mOo0BtdX6ogDC2ZgyhTWVNjbFqe7oXBKiHVidIICIiCZIQJKSvDgMCQCn+RwjAf+SYgBeilFaZAAAAAElFTkSuQmCC'},
                        {"section":"Wallpaper","type":"utility","childpanel" : "sellProductGroupsPanel","icon":'data:image/png;base64,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'}
                    ]
                });
                var settingsBasePanel =  new Ext.Panel({
                    layout:{
                        type:'vbox',
                        align:'stretch'
                    },
                    baseCls: 'blackback',
                    fullscreen:true,
                    scroll:'vertical',
                    items: [{
                        fullscreen:true,
                        scroll:false,
                        xtype: 'settingspanel',
                        cls:'settingscls',
                        grouped     : true,
                        indexBar    : false,
                        singleSelect: true,
                        onItemDisclosure: true,
                        store:settingsStore,
                        itemTpl: '<tpl for="."><div ><img src ="{icon}" class="icon" /><strong>{section}</strong></div></tpl>',
                        listeners:{
                            itemtap : function(dataview,index,item,e){
                                console.log(dataview.store.getAt(index).data.childpanel);
                            }
                        }
                    }]
                });
                var baseSettingsPanel = new Ext.Panel({
                    layout:'card',
                    scroll:false,
                    fullscreen:true,
                    items:[settingsBasePanel]
                });
        }
    });
    Css

    HTML Code:
    <style type="text/css">
           .blackback{
                -webkit-background-size: 0.438em 100%;
                background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#C5CCD4), color-stop(0.71, #C5CCD4), color- stop(0.72, #CBD2D8), to(#CBD2D8));
                background-color:black;
            }
            .settingscls{
                background:transparent;
            }
            .settingscls  .x-list-header{
              background-image:none  ;
              background-color:transparent;
              border:none;
              -webkit-box-shadow:none;
              text-shadow: #000 0 1px 1px;
            }
            .settingscls .x-list-group-items,.coachlist_items .x-list-group-items{
                 padding:1em 1em 0em 1em;
                 text-shadow: #fff 0 1px 1px;
            }
            .settingscls,.coachlist_items{
                 padding-top:20px !important;
            }
            
            .settingscls .x-list-group-items :first-child, .coachlist_items .x-panel-body :first-child{
                 -webkit-border-top-left-radius: 0.4em ;
                 -webkit-border-top-right-radius: 0.4em;
            }
            
            .settingscls .x-list-group-items :last-child, .coachlist_items .x-panel-body :last-child{
                 -webkit-border-bottom-left-radius: 0.4em;
                 -webkit-border-bottom-right-radius: 0.4em;
            }
           .settingscls .x-list-disclosure{
            width: 10px;
            height: 13px;
            margin-top:0.6em;
            right:1em !important;
            -webkit-mask:none;
            -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');
            }
            .settingscls .x-list-item{
                background:white;
            }
            .icon{
              margin-right:20px;
              vertical-align:middle;
            }
        </style>
    You could do in a better way by using baseCls for settingspanel. Hope this would help you
    Hi tomalex0,

    A newbie question here, what's the use of long strings on the image URLs?
    e.g

    Code:
    -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');

Similar Threads

  1. Testing iPhone app wihout iphone (or simulator): Chrome user agent spoofing?
    By charris in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 9 Jan 2012, 12:24 PM
  2. Replies: 4
    Last Post: 3 Dec 2010, 5:43 AM
  3. Create Menu shortcut
    By Maxime in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 3 Apr 2009, 9:50 PM
  4. Replies: 5
    Last Post: 18 Feb 2009, 7:57 AM
  5. [HELP] Using .each() to create Ext.menu.Menu from DataStore
    By Phunky in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 13 Feb 2008, 4:14 AM

Thread Participants: 8

Tags for this Thread

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