PDA

View Full Version : [CLOSED] Combo list adjust



softmachine2011
Jun 15, 2012, 9:56 AM
Related to this thread: http://forums.ext.net/showthread.php?17534-CLOSED-Can-adjust-the-text-to-drop-down-a-combobox

I've this piece of code


var newWidth = Math.max(Math.max(combo.triggerWrap.getWidth(), combo.minListWidth), maxTextWidth + 30);

if (newWidth != combo.listWidth) {
combo.listWidth = newWidth;
combo.list.setSize(combo.listWidth, 0);
combo.innerList.setWidth(combo.listWidth - combo.list.getFrameWidth('lr'));
}


But in v2; combo.listWidth, combo.list and combo.innerList doesn't exists. I'm using this code inside a combo plugin in expand event.

This is code plugin (the other piece of code is in the bottom 'expandEvent' function):


Ext.namespace('Ext.ux.netbox');

Ext.ux.netbox.ExtendedCombo = function (config) {
this.onDeletePress = config.onDeletePress;
this.onBackSpacePress = config.onBackSpacePress;
};

Ext.ux.netbox.ExtendedCombo.prototype = {

init: function (field) {
this.field = field;

this.field.on('specialKey', this.onSpecialKey, this);

if (this.field.rendered)
this.initializeControl();
else
this.field.on('render', this.initializeControl, this);
},

initializeControl: function () {

//FIX:Evitamos ataque XSS
this.field.tpl = '<tpl for="."><div class="x-combo-list-item">{' + this.field.displayField + ':htmlEncode}</div></tpl>';

this.field.getEl().on('keypress', this.processKeyPress, this);
this.field.on('beforeselect', this.beforeSelectEvent, this);
this.field.on('expand', this.expandEvent, this);
this.field.on('blur', this.blurEvent, this);

//Valores obligatorios
this.field.editable = true;
this.field.enableKeyEvents = true;
this.field.typeAhead = true;
this.field.disableKeyFilter = true;
this.field.forceSelection = true;
this.field.mode = 'local';
this.field.minChars = 0;
},

onSpecialKey: function (field, e) {
if (e.getKey() == e.DELETE) {
var oldValue = this.field.getValue();
if (this.field.allowBlank) {
this.field.clearValue();
}
else {
this.field.reset();
}

if (!Ext.isEmpty(this.onDeletePress))
eval(this.onDeletePress)(this.field, e, oldValue);
}
},

processKeyPress: function (e) {
if (e.getKey() == e.BACKSPACE && Ext.isEmpty(this.field.getText())) {
this.field.clearValue();

if (!Ext.isEmpty(this.onBackSpacePress))
eval(this.onBackSpacePress)(e);
}
},

beforeSelectEvent: function (item, record, index) {
item.previousValue = item.value;
},

blurEvent: function (combo) {
if (combo.getStore().findExact(combo.valueField, combo.getValue()) == -1) {
if (!Ext.isEmpty(combo.oldText))
combo.getEl().setValue(combo.oldText);
}
},

expandEvent: function (combo) {
var store = combo.getStore();

if (!Ext.isEmpty(store)) {
var field = combo.displayField;
var maxTextWidth = 0;

Ext.each(store.data.items, function (record) {
var text = eval('record.data.' + field);
var size = Ext.util.TextMetrics.measure(combo.getEl().dom, text);

if (size.width > maxTextWidth)
maxTextWidth = size.width;
});
}

var newWidth = Math.max(Math.max(combo.triggerWrap.getWidth(), combo.minListWidth), maxTextWidth + 30);

if (newWidth != combo.listWidth) {
combo.listWidth = newWidth;
combo.list.setSize(combo.listWidth, 0);
combo.innerList.setWidth(combo.listWidth - combo.list.getFrameWidth('lr'));
}
}
};

Ext.ux.ExtendedCombo = Ext.ux.netbox.ExtendedCombo;


What can I use now to access internal list of the combo?

Daniil
Jun 15, 2012, 11:40 AM
Hi,

Please use

comboBox.getPicker()

It's an Ext.Element which represents the ComboBox list.

Example

comboBox.getPicker().setWidth(200)

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Picker-method-getPicker

softmachine2011
Jun 15, 2012, 2:07 PM
Thanks it solved my problem