PDA

View Full Version : Set/Retrieve Generated Component Id's



djdevz
20 May 2011, 6:17 AM
Is it possible to retrieve the generated id of an Ext Js object?
Or can I set this generated id before-hand?

I want to change the border color of my combobox at run time, the combo box is made using the following code:



var convertedPhyCountries = new Ext.form.ComboBox({
id : 'phyTerritoryCombo',
typeAhead : true,
triggerAction : 'all',
transform : 'phyTerritoryCombo',
forceSelection : true,
width : 290,
});
however the generated component has a generated id:



<input style="width: 265px;" class="x-form-text x-form-field" id="ext-gen84" size="24" autocomplete="off" type="text">....Or is there a way to change the border color using an Ext Js method?

Thanks.

d4h0nk
20 May 2011, 7:11 AM
getId (http://dev.sencha.com/deploy/ext-3.3.1/docs/source/Component.html#method-Ext.Component-getId)() : StringReturns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Parameters:

None.

Returns:

Stringid

for example. :)

I don't think that it's possible to set a new bordercolor using ext-methods cause it's defined in the css.

djdevz
20 May 2011, 7:28 AM
Returns the id of this [B]component or automatically generates and returns an id if an id is not defined yet

Thanks for your reply 'd4h0nk', but this would return the component Id - i.e. phyTerritoryCombo in my case.
I need a way to return ext-gen84 as found in the <input> tag of the generated code.
That way I could set its border color.

Do you think it's possible/is that the best way for me to solve the issue?

d4h0nk
20 May 2011, 7:34 AM
Uh... sorry, my fault.
Let me think about it.

d4h0nk
20 May 2011, 7:53 AM
Ok... I just checked it. But I can't generate your problem.

E.g. this item in a panel:


{
xtype: 'combo',
id: 'id',
store: 'mystore',
valueField: 'value',
displayField: 'disp',
minChars: 0,
ref: 'myCombo'
}


then myCombo.getId() returns 'id' which is the id of the <input>-Tag (<input id='id' ...>)

With


{
xtype: 'combo',
store: 'mystore',
valueField: 'value',
displayField: 'disp',
minChars: 0,
ref: 'myCombo'
}

, myCombo.getId() returns the automatically generated Id (e.g. ext-comp-1141 which is the id in the input-tag).

Sorry, but I can't reproduce your problem.

djdevz
20 May 2011, 8:38 AM
Maybe because I am transforming my combobox.
Here is a simplified example:



<script type="text/javascript">
Ext.onReady(function(){
var convertedPhyCountries = new Ext.form.ComboBox({
id : 'testComboExt',
triggerAction : 'all',
transform : 'testCombo'
});
});
</script>

</head>
<body>

<div>

<select id="testCombo">
<option>test123</option>
<option>test456</option>
<option>test789</option>
</select>

</div>

</body>
</html>


Originally the combobox had an id of 'testCombo', which was then transformed using Ext Js.
The new component now has an id of 'testComboExt'.
However the actual generated html code gives the <input> tag an id (in my case) of 'ext-gen5'.

So if it were possible to retrieve/set that value, I could manipulate the look and feel on the fly.

Thanks for taking your time out for this.

mitchellsimoens
21 May 2011, 6:01 AM
If you just want to change some CSS then set the cls config and create the CSS based on that.

djdevz
23 May 2011, 12:28 AM
I can't find much info on the cls config, could you explain it a little further please?

djdevz
23 May 2011, 3:05 AM
I managed to find a workaround, for anyone that wants to know, here's how I did it:

- I created a div around my combobox and gave it an id.
- I then found the exact css in ext-all.css that is responsible for setting the border color of the combobox, which is


.x-form-text, textarea.x-form-field {
background-color:#fff;
background-image:url(../images/default/form/text-bg.gif);
border-color:#b5b8c8;
}


- I created a new css rule but added the criteria that it had to contain another class name and included my new div border style i.e.



.mandatoryValidationFailed .x-form-text, textarea.x-form-field {
background-color:#fff;
border: 1px solid red;
background-image: url(../../../../images/icons/16x16/error.png);
background-repeat: no-repeat;
background-position: 99% 3px;
}


- Now in order to change the border on the fly, all I had to do was to add the class 'mandatoryValidationFailed' to the surrounding div I created and voila, the border changes!