PDA

View Full Version : Ext.form.field.ComboBox, width should match longest text



asavchuk
15 Jul 2013, 2:32 PM
Hi guys,

having issue with ComboBox width. I set matchFieldWidth: false and now combobox content matched longest text width,
but how do I force to match combobox width as well? Right now looks not very nice.

44890

asavchuk
16 Jul 2013, 9:59 AM
Any thoughts about it?

Is it a bug in framework or should I apply some settings to combobox?
Any help much appreciated.

Thanks!

slemmon
17 Jul 2013, 10:40 AM
Try using matchFieldWidth: false
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-matchFieldWidth

asavchuk
17 Jul 2013, 10:45 AM
this is what I am using, I set matchFieldWidth: false
but ComboBox and its content has different width.

slemmon
18 Jul 2013, 11:09 AM
Oh. I misread what you had posted originally. Now that I've read back over it - what are you wanting to do again?

You're wanting the drop down list to expand to the width of the content of the items in the list? You're wanting the drop down to match the width of the combobox field? Other?

asavchuk
18 Jul 2013, 11:35 AM
Yes, I want drop down list to expand to the width of the content of the items in the list

As you can see from screenshot the content of the item is longer than actual drop down element.

slemmon
19 Jul 2013, 2:11 PM
Yes, I want drop down list to expand to the width of the content of the items in the list

Isn't that what matchFieldWidth: false is doing for you?

asavchuk
19 Jul 2013, 2:23 PM
Isn't that what matchFieldWidth: false is doing for you?

yes, it does.

And oh, I am sorry + drop down to match the width of the combobox field

As you can see from my screenshot combobox does not match dropdown. I want it to match.

Thanks

jdflores
20 Jul 2013, 10:06 PM
There are like four properties that controls the combo-box's picker : pickerAlign, pickerOffset, listConfig and matchFieldWidth. This last property defaults to true and means that the picker's width will match the combo's input width. By setting it to false you are automatically allowing the picker to take a width based on it's content (options).

I guess you are asking to match both the picker and the drop-down width based on the content. The problem I see in this is that if the data is dynamic, you will end up with unpredictable drop-down sizes. It could break your layout. Let's say you want to allow search by typing some characters in the drop-down.

For the sake of demonstration, the following config will resize your dropdown based on the picker's content every time the combo is expanded. Note that I'm using the doAlign private method because otherwise picker will not be aligned:


{
fieldLabel: 'Choose State of NY',
xtype : 'combobox',
matchFieldWidth: false,
id : 'myCombo',
store: 'Assets',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners : {
expand : function(){
var me = this;
me.setWidth(me.labelWidth + me.getPicker().getWidth()+5);
me.doAlign();
}
}
}

Also, you can remove matchFieldWidth property (it defaults to true) and add a tooltip to each drop-down option so your users can see the whole content for those items that are longer.

asavchuk
22 Jul 2013, 9:01 AM
I guess you are asking to match both the picker and the drop-down width based on the content. The problem I see in this is that if the data is dynamic, you will end up with unpredictable drop-down sizes. It could break your layout. Let's say you want to allow search by typing some characters in the drop-down.

I agreed with that. To avoid it I decided to use matchFieldWidth: false,

But still have problem with selected value. If I have long text like in my example "Is there a protocol mismatch" its wider than combobox, and when it selected I see only the end of the text

44981
How do I show beginning of the text or apply ellipsis to it? Like "Is there a protocol..."

Does ExtJs have standard configuration for it? Or should I create listener for it?

jdflores
22 Jul 2013, 9:24 AM
You can set listConfig.itemTpl property and use an ellipsis on it :

44982

Place the following in your combobox config:


listConfig: {
itemTpl: "{[Ext.String.ellipsis(values.name,10)]}"
}


But you will have to manually match the ellipsis second parameter to accommodate your field

asavchuk
22 Jul 2013, 9:31 AM
I want keep dropdown list as is, full text. I want to apply ellipsis to selected value, to show in combobox field.

jdflores
22 Jul 2013, 9:41 AM
In that case, have you tried 'displayTpl'?

44984



displayTpl : '<tpl for=".">' +
// change the 'name' property to reflect your displayField value.
' {[Ext.String.ellipsis(values.name,10)]}' +
' <tpl if="xindex < xcount">,</tpl>' + // Only if using multiSelect
'</tpl>'

asavchuk
22 Jul 2013, 11:46 AM
hmm, displayTpl, thanks jdflores (http://www.sencha.com/forum/member.php?300602-jdflores)
will try your solution.

Thanks!

asavchuk
25 Jul 2013, 1:02 PM
jdflores (http://www.sencha.com/forum/member.php?300602-jdflores) , it works beautiful,

what <tpl for="."> for?
why "."?

jdflores
25 Jul 2013, 1:24 PM
<tpl for="."> is the syntax Sencha has for declaring html templates loops. tpl stands for 'template'.

In this case the tpl tag with the 'for' attribute loops the data. For each one of the iterations, the template will match the data passed-in with html place-holders declared. e.g.:

The following data object:
{ name : 'John', location : 'home' }

And the following template:
<tpl for="."><span>{name} @ {location}</span></br></tpl>

will generate : John @ home.


The "." means the root of the data (like in in file system '.' means current directory). If your data object is :

{
name : 'user1',
location : 'home',
children : [{
name : 'child1',
location : 'school'
}, {
name : 'child2',
location : 'library'
}, {
name : 'child3',
location : 'park'
}]
}

You can iterate like this instead <tpl for="children"><span>{name} @ {location}</span></br></tpl>

Will generate something like this:

child1 @ school
child2 @ library
child3 @ park

asavchuk
25 Jul 2013, 1:34 PM
jdflores (http://www.sencha.com/forum/member.php?300602-jdflores), thank you for detailed explanation, got it now!

Thanks!