PDA

View Full Version : CollapsibleList in Sencha 2.1



mailmejanar
1 Jan 2013, 9:39 PM
hi all

I am struggles to create the expand and collabse function in sencha 2.1 list control. I did that in sencha 2.0.1 but i have not any idea in sencha 2.1. If any body share the code is best way for me

digeridoo
2 Jan 2013, 10:06 AM
Do you know about this component?

https://github.com/kawanoshinobu/Ext.ux.AccordionList

:-)

mailmejanar
3 Jan 2013, 12:02 AM
thank for your reply. I looked that. But i need more than six span items in inside the list item row. I tried in accordian but it should not help me. It is showing only single span in a row.

mailmejanar
3 Jan 2013, 1:19 AM
Wow!.. Suberb! Fantastic! Now i could success through Accordian what i want through list. Thanks a lot digeri. Really thanks..

mailmejanar
4 Jan 2013, 1:16 AM
hi dig

If any possible to load the data from the json.

digeridoo
4 Jan 2013, 2:26 AM
Apparently it's not possible yet....maybe in a future version or you can ask the developer of the extension. I saw this in the code:


// XXX: AccordionList doesn't show when loaded from JSON
// proxy: {
// type: 'ajax',
// url: 'resources/data/testData.json',
// reader: {
// type: 'json',
// rootProperty: 'items'
// }
// }


:-)

mailmejanar
5 Jan 2013, 2:06 AM
thanks digeri. i looked that code in that sample but my bad time it must need to work in my app. So anyway if i will get the problem solved i will post the code here

mailmejanar
7 Jan 2013, 1:54 AM
Hi

Find out the code for loading data from json. Smooth work from my friend Premkumar and customize the code.
we need to update the store onloadproxy function like below

Ext.define('AccordionListExample.store.Task', {
extend: 'Ext.data.TreeStore',
requires: [
'AccordionListExample.model.Task'
],


onProxyLoad: function(operation) {
var me = this,
records = operation.getRecords(),
successful = operation.wasSuccessful(),
node = operation.getNode();


node.beginEdit();
node.set('loading', false);
if (successful) {
records = me.fillNode(node, records);
}
node.endEdit();
this.updateNode(node);
me.loading = false;
me.loaded = true;


node.fireEvent('load', node, records, successful);
me.fireEvent('load', this, records, successful, operation);


//this is a callback that would have been passed to the 'read' function and is optional
Ext.callback(operation.getCallback(), operation.getScope() || me, [records, operation, successful]);
},



onNodeBeforeExpand: function(node, options, e) {

},

config: {
defaultRootProperty: 'items',
model: 'AccordionListExample.model.Task',
autoLoad: true,


// XXX: AccordionList Now show data from JSON
proxy: {
type: 'ajax',
url: 'resources/data/testData.json'//,
// reader: {
// type: 'json',
// rootProperty: 'items'
// }
},
listeners: {
load: function(store, records, successful, operation, eOpts) {
alert(records.length);
alert(store.getCount());
}
}
}
});

indra00
10 Jan 2013, 4:04 AM
Hey guyz one question to all !

Accordion is working for you guyz on sencha 2.1 ?? as for me it is not !

mailmejanar
15 Jan 2013, 9:14 PM
Hi indu

Its working fine senchatouch 2.1. please check it and find what the error you get it

indra00
15 Jan 2013, 10:51 PM
Hi,
Can you please share any sample project citing that Accordion is working. This is really crucial for me. If you can post a sample project with Accordion and ST 2.1 it would be really helpful.

jshon
16 Jan 2013, 8:25 PM
Hi,
Accordion is not working for me in sencha touch 2.1.Please help me with some examples .

AccordionList using json Data is working fine....

mailmejanar
17 Jan 2013, 3:53 AM
hi Indu
this one is working fine for me. https://github.com/kawanoshinobu/Ext.ux.AccordionList. i dont know what you expecting from me. try this

steve_luken
23 Mar 2013, 9:08 PM
Hi, I recently published flexible Tree Grid component designed after Mitchell Simoens Ext.ux.touch.grid component. I started with Shinobu Kawano's work on Ext.ux.AccordionList Appreciate any feedback to further enhance this. Regards, Steve..

https://github.com/swluken/TouchTreeGrid (https://github.com/swluken/TouchTreeGrid)

avrmraja
5 Apr 2013, 2:21 AM
Hello all!!!
First of all i will explain my needs:
* My initial view shows a header text and nine buttons(as phone keypad buttons) which wen tapped should navigate to second page
* Here in this second view it contains another 7 buttons each should be collapsible when tapped.. I saw some demo and docs like: https://github.com/mitchellsimoens/E...ccordionLayout (https://github.com/mitchellsimoens/Ext.layout.AccordionLayout)
http://docs.sencha.com/ext-js/4-1/#!...iner.Accordion (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Accordion)
But the accordion layout can only be used in extjs but i didn't find any options in sencha touch2.1.x, is that possible to do it if so pls tel me how???
If its not possible in touch2.1.x, Can u suggest me how to do my same design in extjs4.1.3
Actually am able to do collapse with a panel containing 7 child panel in extjs but i dont know how to create the initial view that is with buttons which wen tapped navigates to this created second view coz i cant find navigation view or button tap event in extjs...
Thanks in advance!!!

Nuthan Santharam
23 Apr 2013, 6:17 AM
Accordion List's store redefined here:
http://www.sencha.com/forum/showthread.php?253032-Can-not-able-to-load-json-data-in-Sencha-touch-2.1-Accordionlist&p=960254#post927077

Submitted patch to original Author
https://github.com/kawanoshinobu/Ext.ux.AccordionList

Rameshlamani
19 Jul 2013, 5:41 AM
Hi, guys I am working on sencha touch 2.2.1. I have tried but for me accordion list is not working. Can anybody help me in that.