PDA

View Full Version : Grid autogenerate column with values from other columns



eztam
10 Feb 2010, 1:27 AM
Hi,

I've got an application with a GridPanel.

Now I want to add a column to the grid with autogenerated content (from other columns).

For example I've got the columns: ID, Firstname, Lastname, ...
Now I want to generate a column "Actions" which contains a button to redirect to edit page. This means that I have to generate the button with the value of the ID field to get the correct link.

How can I solve this?


Thnx!

p3p3
10 Feb 2010, 2:39 AM
Ave,

for the new Colums you can set a render. http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.Column&member=renderer (http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.Column&member=renderer)
in the new render function you have access to the current render record. here a simple example for a render function


function renderCol(value, metaData, record, rowIndex, colIndex, store) {
return "ID: "+ record.get('ID') + " Name: " + record.get('Lastname');
}

you can return any html you want. :)

i hope I was of help to you
p3p3

eztam
11 Feb 2010, 3:32 AM
Ave,



function renderCol(value, metaData, record, rowIndex, colIndex, store) {
return "ID: "+ record.get('ID') + " Name: " + record.get('Lastname');
}

you can return any html you want. :)

i hope I was of help to you
p3p3

Thanks, this was very helpful.

I've got some other questions:
I'm using a local JsonStore


Ext.create({
xtype: 'jsonstore',
idProperty: 'ID',
data: [
{"ID":1, ...}
...
],
fields: fields
});

Can I add paging and a search field, if I use a local store or do I have to load the data via Ajax-Request?

I'm using Ext.ux.grid.GridFilters and I want to render a form in front of the grid, which contains all filter fields, for simple filtering without going through the header cells menu.
How can I realize this?

Also I want to add a global search field for searching over some (defined) fields.
How to do this?

p3p3
11 Feb 2010, 5:04 AM
hi,

i can help with a local paging. i had the same pro. here is my solution for it.

first you must use a local data proxy in your store.


proxy: new Ext.ux.data.PagingMemoryProxy(myData),
second you add the paginginfo on button bar in your grid.


bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2} ',
emptyMsg: "No topics to display",
}),
at last you can load the data with follow.


store.load({params:{start:0, limit:10}});
but sorry for the filter question. i dont have any ideas :(

regards
p3p3

eztam
11 Feb 2010, 7:57 AM
hi,

i can help with a local paging. i had the same pro. here is my solution for it.

first you must use a local data proxy in your store.


proxy: new Ext.ux.data.PagingMemoryProxy(myData),
second you add the paginginfo on button bar in your grid.


bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2} ',
emptyMsg: "No topics to display",
}),
at last you can load the data with follow.


store.load({params:{start:0, limit:10}});
but sorry for the filter question. i dont have any ideas :(

regards
p3p3

Thanks, I'll try this.

For the Filtering I'm going to write a grid plugin. There I'll iterate through the plugins array and get the plugin (instanceof Ext.ux.grid.GridFilters) if exists.
Then I want to iterate through the filter items and show the filter fields in a panel I create before the GridPanels body.

I logged the filters in firebug and couldn't find neither the filter fields, nor the added filters...

Anyone can help me finding this elements?

How can I get the JSON object of the actual shown grid? (export-like)

eztam
11 Feb 2010, 11:01 PM
I got the paging working partly...
The page count is shown correctly, but there are still all entries on the first page.



var store = Ext.create({
xtype: 'jsonstore',
idProperty: idProperty,
//data: data,
proxy: new Ext.ux.data.PagingMemoryProxy(data),
sortInfo: sortInfo,
fields: columns,
params:{start:0, limit:2}
});
var bbar = new Ext.PagingToolbar({
pageSize: 2,
store: store,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No topics to display'
});
...