View Full Version : [Solved] Reading button properties into Properties Grid

3 Sep 2010, 3:34 AM
could someone Explain me or provide the code to read properties of
<input type='button' id='btnSample' value='Sample'/> and display that in propertiesGrid component

3 Sep 2010, 10:10 PM
Such a simple question, takes such a long time to get answered

5 Sep 2010, 10:40 PM

5 Sep 2010, 11:08 PM
I donno if something is messing up with my code but all i get is a attribute named Length with value 4.
Also how do i set the Source for the grid on the fly. something like when i select a button the grid should load up its properties.btw how will i show a select state, does Ext provide component to Select/Unselect a component like this http://jqueryui.com/demos/selectable/

5 Sep 2010, 11:39 PM
Sorry, that should have been:

var attrs = Ext.getDom('btnSample').attributes,
source = {};
for (var i = 0, len = attrs.length; i < len; i++) {
source[attrs[i].name] = attrs[i].value;

6 Sep 2010, 12:29 AM
Superb :D, i got this to working with the JQueryUI Selectable,Thanks condor.
btw this reads just the attributes that are specified by user right ? If i get to read all attributes of button then is there some other property that i get to loop through

6 Sep 2010, 12:33 AM
No, there isn't something like an 'availableAttributes' property. You will have to keep a list of all available attributes for each nodeName.

6 Sep 2010, 12:38 AM
that means more work for me, i love work :D.[Does Ext have Selectable widget like jqueryui bcoz i love Ext more than jqueryUI] thank you for the help condor.

6 Sep 2010, 12:39 AM
That thing looked like a DataView

6 Sep 2010, 12:41 AM
? Which thing , you mean this http://jqueryui.com/demos/selectable/

6 Sep 2010, 1:02 AM
Unfortunately, this is not available as a separate component.

It shouldn't be that hard to create (have a look at Ext.DataView.DragSelector from examples/ux/DataView-more.js which already does this for a DataView).

6 Sep 2010, 1:04 AM
Oops what am i doing wrong over here animal, Condor

Ext.getCmp('propGrid').setSource(//function that returns object)

because i get error propGrid does not contain method setSource. Also it possible to set source like i have done using a function

6 Sep 2010, 1:09 AM
I don't understand the question.

6 Sep 2010, 1:14 AM
Well the property grid has a method setSource which accepts object and sets it as source for the Grid.
Now all i have done is this

function dSource(){
var attrs = Ext.getDom('toolbox-button').attributes;
for (var i = 0; i < attrs.length; i++)
source[attrs[i].name] = attrs[i].value;
return source;

and then call the method like below


but i get error in firebug saying that setSource is not a method
Is it clear now, if not i will be more happier to clarify further :D

6 Sep 2010, 1:20 AM
1. Are you sure that Ext.getCmp('propGrid') is returning a PropertyGrid instance?
2. Watch your global variables (var source = {})!

6 Sep 2010, 1:33 AM
that was perfect question to ask, I was actually using the property grid as item inside east region and the region had been named 'propGrid' so Ext.getCmp('propGrid') was actually returning reference to panel on east region rather than the properties grid.
Problem solved ~ Task completed .
Thanks to Condor