Sencha Touch 2.0 Accordian layout

[riskitforbiscuit]

Hi,
I have just finished with my first mvc application with ST2. But i m facing challenges in Ux.layout.Accordion. I have copied the plugin file in my project folder, provided their paths in index.html but still getting errors like:

http://127.0.0.1:8020/mitchellsimoen...69803722Failed to load resource: the server responded with a status of 404 (Not Found)

http://127.0.0.1:8020/mitchellsimoen...69803722Failed to load resource: the server responded with a status of 404 (Not Found)

http://127.0.0.1:8020/mitchellsimoen...69803723Failed to load resource: the server responded with a status of 404 (Not Found)


Plz help me out!!! is there anything i m missing out. plz pardon my noobiness.

[boofman15]

I have implemented this component and followed these steps:

1. Placed the Accordion.js file in "Ux/layout/" folder at the root of my project files. So the path is "Ux/layout/Accordion.js"
2. Added following to my index.html

<script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true,
            paths : {
                Ux : 'Ux'
            }
        })


        Ext.require([
          'Ux.layout.Accordion'
        ]);
    </script>

3. Implemented the accordion layout with the following code:

{
  xtype: 'container',
  id: 'myAccordion',
  layout  : {
    type : 'accordion',
    mode: 'MULTIPLE'
  },
  items: [
    //put items that will go in each accordion layer
  ]
}

[riskitforbiscuit]

I have implemented this component and followed these steps:

1. Placed the Accordion.js file in "Ux/layout/" folder at the root of my project files. So the path is "Ux/layout/Accordion.js"
2. Added following to my index.html

<script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true,
            paths : {
                Ux : 'Ux'
            }
        })


        Ext.require([
          'Ux.layout.Accordion'
        ]);
    </script>

3. Implemented the accordion layout with the following code:

{
  xtype: 'container',
  id: 'myAccordion',
  layout  : {
    type : 'accordion',
    mode: 'MULTIPLE'
  },
  items: [
    //put items that will go in each accordion layer
  ]
}

Thnx a ton boofman, followed the steps and got it to show on my chrome browser.
However some errors remain in the project:
1. The list shown is not collapsible. It has opened in expanded mode with all the contents shown.
2. The arrow for expanding/collapsing the content is not working. when i click over it, gives the following error

Uncaught TypeError: Object [object Object] has no method 'getEl' Accordion.js:96


I m again stuck at it with nowhere to go... plz help.

[riskitforbiscuit]

Can anybody here knows how to remove the error mentioned in the above post??
I am really in need to implement it for my project or else i'll have to move to JQuery Mobile which i dont want to.

The disclosure buttons are not working and throwing errors in Accordion.js file's getE1 method. Also how can i style the layout as i want to size the bars and have the bars with some other colors.

Plz help me out!! There are many ppl in this forum who have successfully implemented it... guys plz help...

[mitchellsimoens]

Just pushed a little update to make it work with 2.0.1 to remove the getEl warning.

[riskitforbiscuit]

Just pushed a little update to make it work with 2.0.1 to remove the getEl warning.

Hi mitchell, thnx for reply with a quick fix, but the problem seems to persist. In the source's index.js, if i put textfield/label as the last element of the layout, then this last element always remains expanded even when i click on disclosure. It doesn't show any error however. e.g

Ext.create('Ext.Container', {
fullscreen : true,
layout : {
type : 'accordion',
mode : 'MULTI'
},
scrollable : 'vertical',
items : [

{
title : 'List',
height : 400,
layout : 'fit',
items : [
{
xtype : 'list',
scrollable : {
direction : 'vertical',
directionLock : true
},
itemTpl : '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store : {
model : 'Contact',
sorters : 'lastName',


grouper : {
groupFn : function(record) {
return record.get('lastName')[0];
}
},


data : [
{ firstName : 'Mitchell', lastName : 'Simoens' },
{ firstName : 'Rob', lastName : 'Dougan' },
{ firstName : 'Ed', lastName : 'Spencer' }

]
}
}
]
},
{
title : 'Form',
items : [
{
xtype : 'textfield',
label : 'Test'
}
]
}
]

But if i place a list element at the last then it works fine. Am i missing a trick here or is it a bug, Plz help.. TIA

[riskitforbiscuit]

Hi all,
Looks like Mitchell is busy. So, have any of u guys tried making accordion with Labels(with html) and Images inside Accordion Layout panels.
I have wasted a lot of effort in it, but cant get it to work. It works great as long as a list item is the last item in the layout, irrespective of whatever items i have put earlier to it. The moment i remove list item, make a layout with textfields/labels/images or any other elements, the last pane always remains open, doesn't collapse at all.

I followed the example at:
https://github.com/mitchellsimoens/Ux.layout.Accordion

Please help me out!!!

[intellix]

thanks a million for this Mitchell. This is the sort of thing I need to figure out how to extend items like the layout. I was just on the ST 1.0 version and tried myself to change that with massive failure and I guess it would be extremely helpful to have in the Git readme that theres also a 2.0 version available

Thanks, Dom

[GertBoers]

Right now when it opens for the first time, the last item is expanded.
Is it possible to show part of all items at my homescreen and when an item is clicked, the other ones collapse as usual. I'll ad an image to clarify.

Screen Shot 2012-05-29 at 13.43.25.jpg

Left is my homescreen, once an item is clicked, the accordion should act normally. In this case item 2 was clicked.

Any suggestions?

Thanks

[GertBoers]

Or would it be better to try and do this with another kind of (standard) layout (if so, which one(s)) and some animations?

Thanks