PDA

View Full Version : To access a grid element's html



Rajat Sharma
7 Dec 2011, 4:38 AM
I have a grid that loads data from server. Basically you can imagine it as 5 rows by 2 columns table. I want to make the 1st cell element as a hyperlink. Only cell 00, if you will, and nothing else. How to approach this ?

tvanzoelen
7 Dec 2011, 5:43 AM
One approach. You can just put the hyperlink in the first recordfield in your JSON data. HMTL values will be displayed as html in the grid.

Or else you specify a renderer on the column. In that renderer you can set code that will turn the first row into a hyperlink.

See function renderer in http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column

Or another approach..

Get the first record after load in the store and set the value of the first field. Put the hyperlink in as value.

Rajat Sharma
7 Dec 2011, 6:41 AM
Hi


Get the first record after load in the store and set the value of the first field. Put the hyperlink in as value.

Can you please elaborate on this. I have tried getStore().getAt(<index>) but some errors. Mainly of nature where a method is attempted to be called on a null element. Are these the correct functions to be used, anything else ?

tvanzoelen
7 Dec 2011, 6:54 AM
Yes you can get the Record or Model like the way you did.

I do not know why you get null values, thats somewhere in your code. Try to figure out wich object is null. Is it the grid or the store?

Rajat Sharma
7 Dec 2011, 7:14 AM
Ok I think this might be a scoping error but not sure. Here is the structure.


Ext.onready{

var metricsPanel ={

//in one of the configs for metricsPanel
getMetrics : function(){

var metricStore = Ext.create('Ext.data.Store', {}); //store
var metricsGrid = Ext.create('Ext.grid.Panel', {}); //grid

}//end of getmetrics fn

//another config for metricsPanel

listeners: { afterrender: function (){
this.getMetrics();
}
}

}// end of the main panel which contains everything

//trying to access here:

Ext.MessageBox.alert(Ext.getCmp('metricsGrid').getStore() // prints object Object
Ext.MessageBox.alert(Ext.getCmp('metricsGrid').getStore().getAt(1)); // !! error

- some where in ext js file. "Cannot read property 'buttons' of undefined"
}// end of ext.onready

tvanzoelen
7 Dec 2011, 7:23 AM
Is this just a shortcut,



var metricStore = Ext.create('Ext.data.Store', {});


or has the store some config? Try to check if the store has data.

It is found under getStore().data

And I think that the first row is getAt(0)

Rajat Sharma
7 Dec 2011, 7:33 AM
Yes the store has data. I mean the grid is fully functional that is not a problem. All the data is correclty loaded from server. Model, proxy everything is configured in store.
I pasted the structure mainly because i thought that something/ element is going out of scope. Something is turning undefined.

Ext.MessageBox.alert(Ext.getCmp('metricsGrid').getStore() // prints object Object

should this objectObject print be taken to assume that null errors are not there ? because as soon as I append .getAt(0) - I get that error.Also I tried the first approach you mentioned, that is sending html formatted value from java. That works but I am looking for something better.

tvanzoelen
7 Dec 2011, 7:40 AM
But is the grid loaded at the point you do this



Ext.MessageBox.alert(Ext.getCmp('metricsGrid').getStore() // prints object Object
Ext.MessageBox.alert(Ext.getCmp('metricsGrid').getStore().getAt(1)); // !! error


try to do this on the store.onLoad event.

in the store config you put


listeners: {
load: {
fn: function( store, records, successfulf, operation, eOpts){
store.getAt(0); // or 1 I dont know
}
}

}


in that load event you see the second parameter is records.

records[0] <-- you have it directly

Rajat Sharma
7 Dec 2011, 7:52 AM
It seems you were right:


Ext.MessageBox.alert(store.getAt(0).toString());
prints [object Object]. Without toString() conversion it prints nothing. What does this mean? The load event by definition says that "fires when records have been prefetched". If records have been prefetched, shouldn't I be getting some value at getAt(0) or getAt(1).
records[0]: prints empty too.

tvanzoelen
7 Dec 2011, 7:58 AM
If you use firefox. Maybe you should install firebug and set a breakpoint overthere.

You get a lot more information then printing it out on the console.

Rajat Sharma
7 Dec 2011, 8:03 AM
I am using chrome developer tools. Will try to inspect there. What specifically could I monitor in this case. Thanks for your time.

tvanzoelen
7 Dec 2011, 8:12 AM
The server response and you could set a breakpoint in the stores load event.