PDA

View Full Version : Tree Grid with Column Not maintaining the value



AtulDawkhare
16 Feb 2012, 6:55 AM
Hi

I have Tree Grid. I have used renderer for the column, to display value.


{
text : 'Quantity',
flex : 1,
sortable : true,
dataIndex : 'partNumberId',
align : 'center',
renderer :function(value) {return Ext.String.format('<input type=text id={1} name="{1}" disabled=disabled width="100px" value="0" >', value, value)}

}

The dataIndex "partNumberId" , is used only for the fetching the value in javascript.
Mine requirement is , when user clicks on the check box, present just next to node, I have to change (Quantity column value) the value from "0" (i.e. default value given in the above renderer ) to "1".31764

Now the issue that i am facing that, when I collapse or Expand the tree, and if I the value is other than "0", I am again get the "0" value , i.e. somehow it gets reset.
I have tried to use the listener for "itemcollapse" and "itemexpand" to set the value,
for "itemcollapse" some how I am able to achieved my requirement, but for "itemexpand" as the tree is collapse I am not getting the element. So not able to achieved my requirement.
Note:- to set the value I am using "document.getElementById"

Can you please explain me how to do this ? I just want to persist the value on expand / collapse of the tree that user has changed

AtulDawkhare
16 Feb 2012, 9:56 PM
Can you please suggest me the Best approach for this ?

vietits
16 Feb 2012, 11:00 PM
Do you in fact want to display the 'Quantity' column as 1 when the checkbox is set and 0 otherwise? If so, here is my suggestion


{
text : 'Quantity',
flex : 1,
sortable : true,
align : 'center',
renderer :function(value, meta, record) {
return Ext.String.format('<input type="text" disabled="disabled" width="100px" value="{0}">', record.get('checked') ? 1 : 0);
}

}

AtulDawkhare
16 Feb 2012, 11:36 PM
Thank you so much, its works for me , I was doing this using listener.

Now as we are not using the listener, How will I make the text box enabled, if the value is 1 ?
I mean ,if the check box is clicked , I was doing getElemetedByID and setting the disabled property, but now in this case how can I do that?

Please suggest me.

vietits
16 Feb 2012, 11:58 PM
I am not sure what you want! Do you want to enable the text box when checked? If this is the case, just modifying the renderer:


{
text : 'Quantity',
flex : 1,
sortable : true,
align : 'center',
renderer :function(value, meta, record) {
var checked = record.get('checked');
return Ext.String.format('<input type="text" {0} width="100px" value="{1}">', checked ? '' : 'disabled="disabled"', checked ? 1 : 0);
}
}

AtulDawkhare
17 Feb 2012, 2:02 AM
Thanks a lot, this is what exactly I wanted to implement.

Thanks once again.

I have just stared coding with ExtJS, I didn't knew about this.
So One thing can you please suggest me how to debug this part of the code ?


renderer :function(value, meta, record)
{
var checked = record.get('checked');
return Ext.String.format('<input type="text" {0} width="100px" value="{1}">', checked ? '' : 'disabled="disabled"', checked ? 1 : 0);

}


I mean from where the {0} , {1} values comes? I really want to learn this thing.

vietits
17 Feb 2012, 2:17 AM
You can see more details about here Ext.String.format (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.String-method-format). In short, the syntax of Ext.String.format as follow:


Ext.String.format(template, value1, value2, ... valueN);

where template is a string that contains tokens (or placeholder) that will be replaced by the respective values from the value list (go after template). Tokens have a form of {N} where N is the index of value from the value list. So token {0} will be replaced by value1, token {N} will be replaced by valueN, etc

AtulDawkhare
17 Feb 2012, 2:44 AM
Thanks a lot vietits,

It was really nice help from you.

One more help. Actually wanted to try on my own, but not getting the correct direction.

As we have enabled the text box, i.e. disable="", So user can put any value other than 1, say 3 or 4
when I collapse Or expand the tree I want to have the latest value i.e. 3 or 4 and not the 1 that we set using

checked ? 1 : 0


And also , what way we can disabled the root nodes check box? i.e. "C3K-PWR-1150WAC="
I have searched in the NodeInterface, but didn't find the correct config to set this.

Please give me the direction, that will help me to learn.

vietits
17 Feb 2012, 3:13 AM
1. To my opinion, the best way to keep the value in the Quantity column is storing it in the store and link it with column through dataIndex. Also, to allow user input value, you should use grid cell editor (Ext.grid.plugin.CellEditing) instead of creating input box as you are doing now. You can refer to example of cell editing in the examples folder of the Ext SDK (examples/grid/cell-editing.html).

2. The best way to disabled root checkbox is not to show it. This can be done by removing 'checked' field of that node (not by setting it to false or even null).

AtulDawkhare
17 Feb 2012, 3:26 AM
Thanks a lot, I really don't know how to thank you.

You made my week end :)

Thanks once again, for this Very Good Help.