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
    2,882
    Vote Rating
    89
    fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice

      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
    2,882
    Vote Rating
    89
    fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice fmoseley is just really nice

      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
    63
    Vote Rating
    2
    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!

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