CODEWITHSUNDEEP
javascriptjsonextjs4.2
sreekanth
sreekanth

Reputation: 1371

Grouping values in grid panel after double clicking

I want to group the values in grid panel

Below is the code:

var store = Ext.create('Ext.data.TreeStore', {
root: {
    expanded: true,
    children: [
        { text: "School Friends", expanded: true, children: [
            { text: "Mike", leaf: true, name: "Mike", email: "[email protected]", phone: "345-2222"},
            { text: "Laura", leaf: true, name: "Laura", email: "[email protected]", phone: "345-3333"}
        ] },
        { text: "Facebook Friend", expanded: true, children: [
            { text: "Steve", leaf: true, name: "Steve", email: "[email protected]", phone: "345-2222"},
            { text: "Lisa", leaf: true, name: "Lisa", email: "[email protected]", phone: "345-3333"}
        ] },
    ]
}});

Ext.create('Ext.tree.Panel', {
title: 'All My Friends',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners : {
        itemdblclick : function(tree, record, index){
            Ext.getStore('simpsonsStore').loadRawData([record.raw], true);
        }
}});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
    { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
    { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
    { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
]},
proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
}});

Ext.create('Ext.grid.Panel', {
title: 'Best Friends',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
    { text: 'Name',  dataIndex: 'name' },
    { text: 'Email', dataIndex: 'email', flex: 1 },
    { text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()});

From the above code I am able to get the values from treepanel to grid panel by double clicking.

I want an extra column to group values if we double click the same leaf in the treepanel.

For example if we double click Bart 6 times

Name  email              phonenumber     groupby(number of times)
Bart  [email protected]   555-222-1234    6

It should not append same value in the grid panel. Could any one please help me.

Regards, sreekanth

Upvotes: 0

Views: 168

Answers (1)

Towler
Towler

Reputation: 1562

You'll need to add a count field to your store's fields. Then, you'll need to add the field to your grid. When you double-click the tree, you'll need to check the store to see if the record already exists. If it does, change the value in the count field; otherwise, add a new row.

        itemdblclick: function (tree, record, index) {
            var s = Ext.getStore('simpsonsStore'),
                existingRecIdx = s.findBy(function (r) {
                    return r.get('email') === record.raw['email'];
                });

            if (existingRecIdx === -1) { //row not found
                record.raw.clickCt = 1;
                s.loadRawData([record.raw], true);
            } else {
                var r = s.getAt(existingRecIdx);
                r.data.clickCt++;
                grid.getView().refresh(); //once the data has changed
                                          //refresh the grid
            }
        }

See http://jsfiddle.net/Kk7gL/

Upvotes: 1

Related Questions