PDA

View Full Version : Grouped Nested List?



Graaf
25 Jan 2011, 11:14 AM
Is it possible to have a Grouped Nested List?
Or have an 'grouped bar' between the toolbar and the nestedlist itself?

Graaf
26 Jan 2011, 7:34 AM
Add a 'header' or 'title' in the NestedList. Show between the Toolbar and the List itself. To show the title in there and not in the toolbar.

gmangrum
15 Sep 2011, 11:14 AM
I took the definition of getSubList from the codebase and copied it with some modifications. This worked for me to get grouped nested lists.

getSubList: function (node) {
var items = this.items,
list,
itemId = node.internalId;


if (items && items.get) {
list = items.get(itemId);
}


if (list) {
/*NOTE: have a condition here because I only want the middle nested list to be grouped
remove this if statement and use only the body if you want ALL nested lists to be grouped
*/
if (typeof node.isRoot == 'undefined' && !node.childNodes[0].leaf) {
//list.store.groupField = 'Text';
list.store.getGroupString = function (record) {
/*IMPORTANT!! depending on what your data type is, this line may need to be changed,
but what you want is to return ONLY THE FIRST LETTER of your text
*/


return record.data.Text[0];
};
list.grouped = true;
list.indexBar = true;
}
return list;
} else {
var config = this.getListConfig(node);

/*NOTE: have a condition here because I only want the middle nested list to be grouped
remove this if statement and use only the body if you want ALL nested lists to be grouped
*/
if (typeof node.isRoot == 'undefined' && !node.childNodes[0].leaf) {
config.store.getGroupString = function (record) {
/*IMPORTANT!! depending on what your data type is, this line may need to be changed,
but what you want is to return ONLY THE FIRST LETTER of your text
*/
return record.data.Text[0];
};
config.grouped = true;
config.indexBar = true;
}
return config;
}
}

benwhite
1 Dec 2011, 1:41 PM
Thanks, this was a great tip...
I changed it just a bit so that it's more reusable.
Here is my code.



getSubList: function (node) {
var items = this.items,
list,
itemId = node.internalId;


// can be invoked prior to items being transformed into
// a MixedCollection
if (items && items.get) {
list = items.get(itemId);
}


if (list) {
//add support for grouping
list.store.getGroupString = this.store.getGroupString;
list.grouped = this.grouped;
list.indexBar = this.indexBar;
return list;
} else {
var config = this.getListConfig(node);
//add support for grouping
config.store.getGroupString = this.store.getGroupString;
config.grouped = this.grouped;
config.indexBar = this.indexBar;
return config;
}
}
This could be optimized a bit, but I wanted to keep the logic the same as the original code to make it easier for others to see what I changed.

dbwelch
21 Dec 2011, 9:37 AM
I'm trying to do the same with a nestedlist, but, don't see how this one function will help, is it possible for you post more of your example code and where the function fits in? Also, I'm using Sench 2.0, not sure if this still applies.

falsanu
3 Feb 2012, 4:41 AM
Hi,

i've tried your code and it works quite good, but there is a massive problem when using the Detail-Card. When i click on a leaf i'll get the wrong data for the Detail-Card.

Do you have an idea where this fault happens? I assume that the error happens here:

itemId = node.internalId;

Thanx for any help.

falsanu.

Pulp Fiction
15 Jun 2013, 1:44 AM
Hi, sorry but this method does not work for me. I am using a JsonP Tree Store:


Ext.define('MyApp.store.MyJsonTreeStore', {
extend: 'Ext.data.TreeStore',

requires: [
'MyApp.model.MyModel'
],

config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonTreeStore',
proxy: {
type: 'ajax',
url: 'asd.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
groupFn: function(item) {
return item.get('numero');
}
}
}
});


And this is the nestedList with the getSubList function:


Ext.define('MyApp.view.MyNestedList', {
extend: 'Ext.dataview.NestedList',

config: {
fullscreen: true,
styleHtmlContent: true,
store: 'MyJsonTreeStore',
title: 'Asd',
variableHeights: true
},

getItemTextTpl: function(node) {
return '{text}';
},

getDetailCard: function(node) {
if (node) {
return {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true,
fullscreen: true,
html: '<p>' + node.get('info') + '</p>'

};

}
},

getSubList: function (node) {
var items = this.items,
list,
itemId = node.internalId;

if (items && items.get) {
list = items.get(itemId);
}


if (list) {
list.store.getGroupString = this.store.getGroupString;
list.grouped = this.grouped;
list.indexBar = this.indexBar;
return list;
} else {
var config = this.getListConfig(node);
config.store.getGroupString = this.store.getGroupString;
config.grouped = this.grouped;
config.indexBar = this.indexBar;
return config;
}
}

});

But this makes me see the list normally. I would like to group only the first list that appears.
Can you give me some suggestions? Thank you very much.