I replaced the microloader

with

<link rel="stylesheet" href="sdk/resources/css/sencha-touch.css">
<script  type="text/javascript" src="app.js"></script>

I am getting an error in the following code:

compile: function (tpl) {
var me = this,
code = me.generate(tpl);

    // When using "new Function", we have to pass our "Ext" variable to it in order to
    // support sandboxing. If we did not, the generated function would use the global
    // "Ext", not the "Ext" from our sandbox (scope chain).
    //
    return me.useEval ? me.evalTpl(code) : (new Function('Ext', code))(Ext);
},

Unexpected token ')'

code is

"var fm=Ext.util.Format,ts=Object.prototype.toString;
function f1(out,values,parent,xindex,xcount) {
try { with(values) {
return(this.isExpanded(values))
}} catch(e) {
Ext.Logger.log("XTemplate Error: " + e.message);
}
}
return function (out,values,parent,xindex,xcount) {
var c0=values, a0=Array.isArray(c0), p0=parent, n0=xcount, i0=xindex, v;
if (values['leaf']) {
out.push('

}"

The TreeStore has the ability to load child nodes dynamically, if they aren't loaded during the last request.

Let's make an example with the provided testData.json
The first request gets this:

{
    "items" : [{
                "text" : "Today",
            }, {
                "text" : "Tomorrow",
            }, {
                "text" : "This week",
                "items" : []
            }, {
                "text" : "Later",
            }]
}

If we tap on Today in a nestedlist the treestore makes another request for the child nodes of Today and could get

{
    "text": "Eat",
    "leaf": true
}, {
    "text": "Sleep",
    "leaf": true
}, {
    "text": "Drinking",
    "leaf": true
}

But the store patch of Accordion.js overrides the onNodeBeforeExpand function, which handles the requests for child nodes. If I remove this override the request calls the onProxyLoad function override. A difference between the treestore's onProxyLoad function and the override is that the updateNode function of a nodestore is called. This updateNode function deletes the previous loaded records with the loaded child nodes.

Any hints on howto enable dynamic loading of child nodes?

Hi kawanoshinobu,

Am facing a problem to put list index bar on your Accordion list, am using sencha 2.3.0. I didn't find any config to include index bar in to your list.

I have edited the AccordionList.js file like the following way
makeListConfig: function() {
var me = this,
defaultConfig = {
scrollToTopOnRefresh: false,
indexBar : true,
indexBar: {
margin:1,
listeners: {
index: function (html, target, eOpts) {
console.log('inside indexbar',target);

                    } // tap


                }

            }

Now the list is showing the index bar. But some issues there, after press any Letter from index bar the list is sorting accordingly. After sorting i cannot touch any list elements. When i touch any list element, the index bar event is firing.

I don't know the proper way to include index bar in to your accordion. Please help me to solve this issue. Your help is much appreciated. Thanks in advance.

I have create a sample app with the same problem, please find the app from the following url

https://docs.google.com/file/d/0BxWBe4mOYNTgb0dHb1RoNU9laVk/edit?usp=sharing

I am using AccordianList with 'useComponents' set to true.

I can display a JSON data through TreeStore, and even add a new Node with some default data (by adding it to TreeStore), but I can't figure out how to get the changed/updated data from the node.

For example: From your example: http://docs.kawanoshinobu.com/accordionlist/, in Components Tab, select Project B, and change 'Hello' to 'Good Morning', how can I update that record in TreeStore?

Hi,
This is not actually an issue. Sorry I couldn't find a a better place to post this. Tell me if there is one, and I will post it again.

How can i reduce the height of Header itemTpl, currently its taking the default height 47 of sencha LIst. Is there any way to reduce the height.. Can u suggest a way to solve this.. thanks in advance ..

I was looking for an accordion that could talk to a Store and came across this. Very promising, thank you! :-)

Is it hard to make this work with later versions of Architect?

Another option if it's hard to keep up with Sencha's releases for Architect is to get the packages into http://bower.io. In general, one checks out the Bower packages directly into their project space, then simply adds namespace handlers to the Loader paths so they are usable. It's not as nice as Architect, but it still allows much more confident management of artifacts within a team environment.

Thanks again for your hard work on this!

Add the new feature,

• It display number in the header.
• It shows child node's count.
• It able to swich use or not by config.

Hi,

I have installed Ext.ux.AccordionList.aux as per your instructions here https://github.com/kawanoshinobu/Ext.ux.AccordionList,
but its not showing in the extensions section in my sencha architect 3.2.

Can you help me?

-->>

Ok I see doesnot support sencha touch 2.4. working in 2.3. Solved. Thanks.

-->>

Sorry but I am getting error like "cant read property indexOf null...."

Can you please provide me the source code of the example or please tell how do i get the source code of the example

We've implemented the AccordionList on several views, but it doesn't scroll on a Windows Phone.

We've also tried your demo on a Windows Phone (emulator) and it has the same problem.

Hi Kawanoshinobu,

Once again thank you so much for this awesome Plugin. Is there any way to add sencha components in this accordion child list. I would like to add a datepicker and textbox in contentItemTpl. Is there any way to accomplish this without adding html.

Please suggest me a solution.. Your help is much appreciated. Thanks in advance ...

I did the following patch

diff --git a/ux/AccordionList.js b/ux/AccordionList.js
index 173f02e..9c3d9e2 100644
--- a/ux/AccordionList.js
+++ b/ux/AccordionList.js
@@ -345,6 +345,21 @@ Ext.define('Ext.ux.AccordionList', {
     },

     /**
+     * Collapse all of contents.
+     */
+    doSingleCollapse: function(record) {
+        var me = this;
+        me.doAll(function collapse(node) {
+            if(node.data.depth==record.data.depth)
+                node.collapse();
+            console.log(node);
+            /*if (!node.isLeaf()) {
+                node.childNodes.forEach(collapse, me);
+            }*/
+        });
+    },
+
+    /**
      * @private
      * @param  {Function} updater
      */
@@ -403,7 +418,7 @@ Ext.define('Ext.ux.AccordionList', {
             }
             else {
                 if(me.getSingleMode()) {
-                    me.doAllCollapse();
+                    me.doSingleCollapse(record);
                 }

                 node.expand();

I have a list with scrollable:false
and height:'auto'
however the list height is not adjusting well always. sometimes it does but most of the times it doesnt

thank you

hi, accrdion list is not showing in win8 device after i packaged for win8 device

Hi,

is it possible to expand a specified node from other element ?

Thanks.

Hi,

Am using ur accordion list in my project, its working great..But small problem with set emptyText when there is no data to display in list i tried this way, but its not showing empty text..Can u guide me. Thanks in advance
{
xtype: 'accordionlist',
store: Ext.create('WinReo.store.Task'),
flex: 1,
cls:'testlistvalue',
emptyText:'No Property to Show',
listConfig: {
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
noMoreRecordsText: 'No More Properties'

                    }

                ]
            }

Hello..

Thanks for helping us.

I am adding new child. It can added to store but it will not display in list.

Ext.getStore('test').getRoot().appendChild({text:'test', leaf:true})

Let me know if you need other info.

Thanks
Sandip

sometime when i load store from server, request gets successful but json data takes time to load in store and chrome network as well that causes the whole browser tab of my app to hang, buttons in application gets super slow. if we dont get leaf data from server for treeStore then it work perfectly. but we have to get leafs data as well to make collapsible list. if u has any clue what's going wrong?
it work sometime even with leaf data as well when there are 4, 5 records only in json. mostly it causes issue when there are more than 10 records all with leafs data as well.

Hello,

I am facing problem to insert, update and delete node and subnode dynamically.

I am using sencha touch : 2.3.1.

Also i am facing same problem in current demo.Let me know if you need other info.

Thank You
Sandip

I don't think the "addrecords" event handler is correct. fixTreeStoreSortOrder just plain does not work when the inserted record is NOT the first child.

This seems to work in Sencha Touch 2.3.1 to rebuild the "all" list and the items "list".

        store.on('addrecords', function (store, records) {
            // fix sort order if we add children to a already loaded treestore
            var all = [];
            var expanded = [];
            addNodes(all, store.getRoot());
            addExpanded(expanded, store.getRoot());
            store.getData().all = all;
            store.getData().items = expanded;

            function addNodes(arr, node) {
                var childNodes = node.childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    arr.push(childNodes[i]);
                    addNodes(arr, childNodes[i]);
                }
            }
            function addExpanded(arr, node) {
                var childNodes = node.childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    arr.push(childNodes[i]);
                    if (childNodes[i].get("expanded")) {
                        addExpanded(arr, childNodes[i]);
                    }
                }
            }
        });

Should do the same for "removerecord" events.

After adding all the records, I also had to do a

store.updateNode(store.getRoot())

The scrollable: false property is not working in your list,
the priblem with that is that the scrollable of the page and the list makes the user expericence akward

Hi,

I am not able to integrate the plugin properly with the steps given. Can you please elaborate a bit about how do I put the plugin in the app generated by sencha cmd 5 ?

Thanks a lot.

In AccordionList.readyList() there is one undeclared variable, list.

In AccordionListItem.doUpdateItemMark() the variable depth is undefined: AFAICT, the caller function, updateRecord(), should pass it as an argument.

Hey guys,

I' m unsure if this is a bug or a resulting bug by a erroneous store data.

Line 840 on AccordionList throws exception because records[0].parentNode is null

My store looks like:

Ext.define('MyApp.store.TreeTests', {
    extend: 'Ext.data.TreeStore',
    requires: [
        'MyApp.model.TreeTest'
    ],

    config: {
        storeId: "TreeTests",
        defaultRootProperty: 'children',
        model: 'MyApp.model.TreeTest',
        rootVisible: true,
        defaultRootId: 0,
        autoLoad: true,

        root: {
            "GUID": "00000000-0000-0000-0000-000000000000",
            "ParentGUID": "",
            "Name": "Root",

            "children": [
                {
                    "GUID": "560160a4-d003-4e41-805f-491914a04c71",
                    "ParentGUID": "00000000-0000-0000-0000-000000000000",
                    "Name": "some name",

                    "children": [
                        {
                            "GUID": "3212bb0b-0fea-4585-af3f-05a18f8674d4",
                            "ParentGUID": "560160a4-d003-4e41-805f-491914a04c71",
                            "Name": "name943423",
                        }
                    ]
                },
                {
                    "GUID": "bd85b843-6a7b-4351-aabf-16c07a091f76",
                    "ParentGUID": "00000000-0000-0000-0000-000000000000",
                    "Nr": "9952",
                    "ID": "ID02",
                    "Name": "give me a name",
                    "children": [
                        {
                            "GUID": "4ed81580-a7b5-4c9c-b430-2d2d25c19d7o",
                            "ParentGUID": "bd85b843-6a7b-4351-aabf-16c07a091f76",
                            "Name": "name123",
                        }
                    ]
                }
            ]
        }
    }
});

Thanks for any help!

Hi @kawanoshinobu

I am facing issue refreshing the store. Let me describe the scenario first.

I am using AccordianList for a hybrid mobile application, in my case iPhone App, having Cordova as native plugin for database management.

In AccordianList, I have 200 list items each item having one leaf. I have used singleMode=true. Initial loading of the list takes around 4 seconds. When I refresh the list by calling removeAll() and then setStore(), it takes around 2.5 minutes to reload the list view for the same data.

Any insight or suggestion would be heartily appreciated.

Bharat

In your example: http://docs.kawanoshinobu.com/accordionlist/
In the "Decorate" tab, the "This week" element has 0 leaf, but we can click/tap on it and the right/down arrow is activated.
You should add a special css class to prevent the arrow rotation.

Hello,

I'm relative new to Senchaand im trying to understand your code for my own project..

I would like to know how you execute the headerItemTpl on the AccordionList.js or where is it called from to load the list.

I seem to understand the MVC structure but I cant see to understand how headerItemTpl works since its not part of the sencha docs.

Sorry, If im not asking the right questions. I am learning sencha at the same time.

Thank you in advance.

Byron

In the example app at http://docs.kawanoshinobu.com/accordionlist, the Components Tab leaves are editable, but the edits are not preserved. If you close the branch and reopen it, the changes are gone.

I have an application which needs to be able to have editable leaves.

Hi,

In my Sencha app data is coming from database. It returns JSON Array (in exactly the same format as the accordion expects). This array when set through setData(result_from_db) in controller replicates the records. If we use setRoot(result_from_db), no records are seen. There is no error on the console as well.

Any help or recommendation in this regards will be very helpful.

Regards

Hi,
Am facing a problem with set itemHeight in to auto. Please see the code in your AccordionList.js file. Something went wrong in your list nothing is displaying now. When i comment that itemHeight:'auto' (line no 274) its working fine..

But i have a requirement to set the itemHeight in to auto.. Is there any way to set itemHeight dynamically. ? Please guide me in this issue.. Your help is much appreciated.. Thanks in advance

272 list = Ext.create('Ext.dataview.List', {
273 itemTpl: itemTpl,
274 //itemHeight : 'auto',
275 scrollToTopOnRefresh: false,
276 plugins: me.getListPlugins()
277 });

Can you explain how the store fields works in Sencha Architect 3? I can programmatically assign the store to the accordion component accordion.setStore(x); but i cannot seem to get the accordion to work with the store field. It seems that Sencha Architect 3 wraps the field in a ' '.

store: 'Ext.create('App.data.TreeStore')'

Let me say that it is just awesome plugin .I am trying to add the Accordion functionality to my new project, Its working fine..
I have large no of data. So my doubt is ,can i include Listpaging or PullRefresh plugin along with this Accordion.
Can u have any example about how to do that..Please suggest how such functionality included with Accordion..Your help is much appreciated..Thanks in advance

I've been trying to make this component work with a dynamic url and cannot. Does this functionality exist?

See my question on SO:
http://stackoverflow.com/questions/20184362/sencha-touch-accordion-list-not-loading-data

Specifically, my issue right now is that when I switch the URL and reload the store with load(), the accordion list does not change.

More bug occur when user sorters | tree has many child - decoration load duplicate .... haizz

I'm new to sencha touch. Tried to follow your documentation but still not be able to make it work. I got this error : 404 Not found http://127.0.0.1:61357/ios/www/touch/src/dataview/component/ListItem.js?_dc=1392707817379
Can you tell me what's the problem?

Hi.
This is a simple drop down folding animation.
Please take in consideration.

Best regards,
Philip

diff --git a/ux/AccordionList.js b/ux/AccordionList.js
index b8a5019..66e2c0c 100644
--- a/ux/AccordionList.js
+++ b/ux/AccordionList.js
@@ -236,6 +236,7 @@ Ext.define('Ext.ux.AccordionList', {

             list = Ext.create('Ext.dataview.List', {
                 itemTpl: itemTpl,
+                itemHeight : 'auto',
                 scrollToTopOnRefresh: false
             });

@@ -389,6 +390,79 @@ Ext.define('Ext.ux.AccordionList', {
         }
     },

+    addListExpandListeners : function(ListItem,list){
+
+        var me = this;
+
+       ListItem.setListeners({
+
+            expand: function(lthis, eOpts){
+
+                Ext.each(lthis.childNodes,
+                    function(el){ //console.log(list.getStore().indexOf(el));
+                        var item = list.getItemAt(list.getStore().indexOf(el));
+                        item.hide();
+                        if (el.get('expanded')){
+                            me.addListExpandListeners(item,list);
+                            el.collapse();
+                            el.expand();
+                        }
+                });
+
+                Ext.each(lthis.childNodes,
+                    function(el){ //console.log(el)
+                        var item = list.getItemAt(list.getStore().indexOf(el));
+
+                        try{
+                            item.show({
+                                easing: 'easeInOut',
+                                duration: 800,
+                                autoClear: true,
+                                from: {
+                                    opacity: 0,
+                                    height:'0px'
+                                },
+                                to: {
+                                    opacity: 1,
+                                    height:'51px'
+                                }
+                            });
+                        }catch(e){}
+
+                });
+            }
+            
+        });
+        
+    },
+
+    loadedTaps : [],
+    
+    animtap : function(lthis, list, index, target, record, e){
+
+
+        // http://siva-technology.blogspot.pt/2013/03/sencha-touch-scroll-to-selected-item-on.html
+        // Position list item
+        var store = list.getStore(),
+            selected = list.getSelection()[0],
+            idx = store.indexOf(selected),
+            map = list.getItemMap(),
+            offset = map.map[idx];
+        //console.log("scrolling...");
+        list.getScrollable().getScroller().scrollTo(0,offset);
+
+        var parentitem = list.getStore().getAt(index);
+
+        if (this.loadedTaps[record.getId()]) return;
+
+        this.addListExpandListeners(parentitem,list);
+        
+        this.loadedTaps[record.getId()]=true;
+
+                
+                
+    },
+            
     /**
      * Called when an list item has been tapped
      * @param {Ext.List} list The subList the item is on
@@ -402,6 +476,8 @@ Ext.define('Ext.ux.AccordionList', {
             store = list.getStore(),
             node = store.getAt(index);

+        this.animtap(me, list, index, target, record, e)
+
         me.fireEvent('itemtap',
             me, list, index, target, record, e);

@@ -437,6 +513,8 @@ Ext.define('Ext.ux.AccordionList', {
                 successful = operation.wasSuccessful(),
                 node = operation.getNode();

+            this.loadedTaps = []; // Reset
+        
             node.beginEdit();
             node.set('loading', false);
             if (successful) {

Hey kawanoshinobu.

Have you ever tried to fill the treestore with a json file.
I'm trying this and even though the store is filled, the results aren't showed.
I have compared the stores from the example and mine and the only difference that I can find is this.
http://www5.picturepush.com/photo/a/11463868/img/11463868.png
So my question is: 'Have you tried filling the accordionlist via json. And what are tips or tricks to make it work'.

Thanks,

[Quote]
Really well done for the Sencha Touch Accordion component, We were using it and was working fine on Sencha Touch. Unfortunately we had to migrate to Extjs 6 modern toolkit and the component does not work as intended anymore. Do you have any intention of updating it for Extjs 6 please? Any feedback is highly appreciated.

Hello! Great component! When I open the demo website http://docs.kawanoshinobu.com/accordionlist/ with Chrome browser, I don't see any LIST, only the Toolbar and the buttons "Expand" and "Collapse". I check the Error console but there is empty, no erros..

Please, Can you check its??
Other Question, this component work in Blackverry devices? Thanks!

Regards!

trying to get the record.get('Something') in the intem tap event but onitemtapevent prevents the list to expand.

Quote.

We have a question related to the following extesionm that we are using for our sencha Touch Project.

https://github.com/shinobukawano/Ext.ux.AccordionList/blob/master/architect/AccordionList.js

Is it possible to apply a XTemplate to the headerCloseTpl and headerOpenTpl ?
As we would require to evaluate values from the record (using Xtemplate functions), and show different things on the header accordingly.

Thanks.
David

Hi,

Is it possible to swipe on item? If it possible please let me know how can i use this event .

Hi Kawanoshinobu,

In my App i have a contact button to show all contacts in accordion list, when tap on that button am loading the store to get updated records in accordion. My problem is when i load the store Ext.getStore('Task').load(), your list duplicating data. Note sure about is it a bug. How to avoid duplication in accordion.

This is what am doing to load the store
contactbtntap:function(){

    var contacts = Ext.getCmp("contacts");
    if(!contacts){
        contacts = Ext.create('WinReo.view.Contacts');
    }
    Ext.Viewport.add(contacts);
    Ext.Viewport.animateActiveItem(contacts,{type: 'slide', direction: 'right'});
    //Ext.getCmp('accordionlistcts').removeAll();
    Ext.getStore('Task').load(); 

}
I tried with remove all list records before loading the store.. But when the list contain large no of data its slowing the app..

Please look in to my issue.. Thanks in advance..