1. #1
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default how to make an accordion list

    how to make an accordion list


    Hello! Guys tell me how to make the list of harmonica ... to get something like this:
    Can anyone have an example???
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,970
    Vote Rating
    134
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    You can use the following plugin:
    https://github.com/mitchellsimoens/Ux.layout.Accordion
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default how to make an accordion list

    how to make an accordion list


    and how to apply this code ... I have something that does not work ...

    Code:
    Ext
        .define(
        'MM.view.Contacts',
        {
            extend: 'Ext.List',
            xtype: 'contacts',
            requires: [
                'Ext.XTemplate',
                'Ext.data.Store',
                'Ext.List',
                'Ext.data.proxy.Rest',
                'Ext.plugin.ListPaging',
                'Ext.plugin.PullRefresh'
            ],
            plugins: [
                { xclass: 'Ext.plugin.ListPaging' },
                { xclass: 'Ext.plugin.PullRefresh' }
            ],
            config: {
                title: 'Отправки',
                variableHeights: true,
                scrollToTopOnRefresh: false,
                grouped     : true,
                //bufferSize: 10,
                useHeaders: true,
                //minimumBufferDistance: 1,
                id: 'listcont',
                store: 'otprStore',
                striped: true,
                onItemDisclosure: false,
                itemTpl: [
                    '<tpl if="f2 == \'0\'">',
                    '<img src="resources/images/{mode}{f2}{f3}.png" width="32" height="50"></div>',
                    '<span style="font-size: 20px; position: absolute; z-index: 900; left: 70px; top: 8px;">{id}</span>',
                    '<tpl if="mode == \'cp\'">',
                    '<span style="font-size: 15px; position: absolute; z-index: 900; left: 70px; top: 32px;">{f4}</span>',  ///заходит срока
                    '<tpl else>',
                    '<span style="font-size: 15px; position: absolute; z-index: 900; left: 70px; top: 32px;">{f13}</span>', ///заходит срока
                    '</tpl>',
                    '<tpl if="mode == \'cp\'">',
                    '<br><br><span>{f5}</span>',
                    '<tpl else>',
                    '<br><br><span>{f14}</span>',
                    '</tpl>',
                    '<br><span><p style=color:#080cea style=font-size:40px style=font-weight:bold>{f10}</p></span>',
                    //DOPOLNITELNAY INFORMACIY
                    '<span><em><i>{f9}</i></em></span>',
                    '<tpl if="f18 === true">',
                    '<img src="resources/images/{f18}.png" style="position:absolute;left:250px;top:2px;z-index:1;">',
                    '</tpl>',
                    '<tpl if="f18 === true">',
                    "<img src=\"resources/images/doplImages/{f18}.png\"  align=right><p style=color:#ea0608 align=\"right\"> {f19}</p>",
                    '</tpl>',
                    '<tpl else>',
                    '<img src="resources/images/{mode}{f2}{f3}.png" width="32" height="50"></div>',
                    '<span style="font-size: 20px; position: absolute; z-index: 900; left: 70px; top: 8px;">{id}</span>',
                    '<br>Мест: {f6}, {f7}кг. / {f8}м<sup>3</sup>',
                    '<tpl if="mode == \'cp\'">',
                    '<span style="font-size: 15px; position: absolute; z-index: 900; left: 70px; top: 32px;">{f13}<br></span>',
                    '<tpl else>',
                    '</tpl>',
                    '<tpl if="mode == \'dv\'">',
                    '<br><span>{f14}</span>',//poluchatel
                    '<tpl else>',
                    '<br><span>{f5}</span>', //otpravitel
                    '</tpl>',
                    //KONTAKTNAY INFORMACIY
                    '<br><span><p style=color:#080cea style=font-size:40px style=font-weight:bold>{f10}</p></span>',
                    //DOPOLNITELNAY INFORMACIY
                    '<span><em><i>{f9}</i></em></span>',
                    //STATUS DOPLAT
                          '<tpl if="f18 === true">',
                    '<img src="resources/images/true.png" style="position:absolute;left:230px;top:2px;z-index:1;width:100;height:80;">',
                          '</tpl>',
                          '<tpl if="f18 === true">',
                    '<img src="resources/images/doplImages/true.png"  align=right><p style=color:#ea0608 align="right"> {f19}</p>',
                          '</tpl>',
                    '</tpl>',
                    {
                        posted: function(date) {
                            try {
                                var now = Math.ceil(Number(new Date()) / 1000),
                                    dateTime = Math.ceil(Number(new Date(date)) / 1000),
                                    diff = now - dateTime,
                                    str;
    
    
                                if (diff < 60) {
                                    return String(diff) + ' seconds ago';
                                } else if (diff < 3600) {
                                    str = String(Math.ceil(diff / (60)));
                                    return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
                                } else if (diff < 86400) {
                                    str = String(Math.ceil(diff / (3600)));
                                    return str + (str == "1" ? ' hour' : ' hours') + ' ago';
                                } else if (diff < 60 * 60 * 24 * 365) {
                                    str = String(Math.ceil(diff / (60 * 60 * 24)));
                                    return str + (str == "1" ? ' day' : ' days') + ' ago';
                                } else {
                                    return Ext.Date.format(new Date(date), 'jS M \'y');
                                }
                            } catch (e) {
                                return '';
                            }
                        }
                    }
                ],
               items : [
                        {
                        xtype : 'toolbar',
                        height: 70,
                        docked : 'bottom',
                            layout: {
                                pack: 'center',
                                type: 'hbox'
                            },
                        defaults : {
                            ui : 'plain'
                        },
    
    
                        items : [
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconMask: true,
                                iconCls : 'arrow_left',
                                id : 'namebutton',
                                ui : 'back',
                                handler : function() {
                                    var sto = Ext.getStore('otprStore');
                                    sto.clearFilter();
                                    sto.filter('mode', 'dv');
                                    Ext.getCmp('tool').setTitle('Доставка');
                                }
                            },
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconCls : 'team',
                                ui : 'action',
                                handler : function() {
                                    Ext.getStore('otprStore')
                                        .clearFilter();
                                    Ext.getCmp('tool').setTitle('Весь список');
                                }
                            },
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconCls:'arrow_right',
                                ui : 'forward',
                                handler : function() {
                                    var sto = Ext.getStore('otprStore');
                                    sto.clearFilter();
                                    sto.filter('mode', 'cp');
                                    Ext.getCmp('tool').setTitle('Забор');
                                }
                            },
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconCls : 'refresh',
                                badge : '0',
                                ui : 'action',
                                id : 'reload',
                                handler : function(record) {
                                    var sto = Ext.getStore('otprStore');
                                    sto.load;
                                    Ext.getCmp('tool').setTitle('Обновление');
                                    Ext.getCmp('reload').setBadgeText(''+sto.getCount());
                                    Ext.getCmp('accord').show(); ///////////////////////////////////////////////////////////////
                                }
    
    
                            },
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconCls : 'user',
                                ui : 'action',
                                id : 'elLoad'
                            },
                            {
                                xtype : 'button',
                                height: 50,
                                width: 50,
                                flex: 1,
                                iconCls : 'more',
                                ui : 'action',
                                handler: function()
                                {
                                    var actionSheet = Ext.create('Ext.ActionSheet', {
                                        ui : 'light',
                                        items: [
                                            {
                                                id : 'spravkaButton',
                                                iconCls : 'info',
                                                xtype : 'button',
                                                text : 'Справка',
                                                ui : 'action',
                                                handler : function()
                                                {
                                                    Ext.Viewport.add(actionSheet);
                                                    actionSheet.hide();
                                                }
                                            },
                                            {
                                                id : 'closerButoon',
                                                xtype : 'button',
                                                ui : 'decline',
                                                text : 'Выход',
                                                iconCls : 'home',
                                                handler : function()
                                                {
                                                    Ext.Viewport.add(actionSheet);
                                                    actionSheet.hide();
                                                }
                                            },
                                            {
                                                xtype : 'button',
                                                ui : 'confirm',
                                                text : 'Закрыть меню',
                                                iconCls : 'arrow_down',
                                                handler : function()
                                                {
                                                    Ext.Viewport.add(actionSheet);
                                                    actionSheet.hide();
                                                }
                                            }
                                        ]
                                    });
                                    Ext.Viewport.add(actionSheet);
                                    actionSheet.show();
                                }
    
    
                            } ]
                    }],
                 listeners:
                  [
                  ]
               },
                   onReady: function() {
                      Ext.override(Ext.data.proxy.Rest, {
                      getMethod: function(){
                        return 'POST';
                      }
                   })
               }
    
    
    
    
            }
        );

  4. #4
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,970
    Vote Rating
    134
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    See the index.js file in the Ux.layout.Accordion download. It contains an example showing how to use this component.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  5. #5
    Sencha User armode's Avatar
    Join Date
    Nov 2011
    Location
    Germany / Darmstadt
    Posts
    64
    Vote Rating
    4
    armode is on a distinguished road

      1  

    Default


    Here's another awesome accordion plugin: https://github.com/kawanoshinobu/Ext.ux.AccordionList

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    12
    Vote Rating
    0
    shuixiya1999 is on a distinguished road

      0  

    Default


    Quote Originally Posted by armode View Post
    Here's another awesome accordion plugin: https://github.com/kawanoshinobu/Ext.ux.AccordionList
    Cool!