PDA

View Full Version : combobox blank option



wiulma
11 Sep 2008, 12:50 AM
Hi!
I have read some thread about Blank Text Item in Combo Box.
I have an idea to resolve this problem, but I'm not able to realized it.
I have a combo with a store.
I'd like to add a config parameter ("blankOption").
If this parameter is set to "true" I'd like to modify the array of data in the store, adding a blank record.
So I tried to extend the combobox object in this way:



Ext.form.MyComboBox = Ext.extend(Ext.form.ComboBox, {


initComponent : function(){
Ext.form.EngComboBox.superclass.initComponent.call(this);
if(this.transform){
this.allowDomMove = false;
var s = Ext.getDom(this.transform);
if(!this.hiddenName){
this.hiddenName = s.name;
}
if(!this.store){
this.mode = 'local';
var d = [], opts = s.options;
for(var i = 0, len = opts.length;i < len; i++){
var o = opts[i];
var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
if(o.selected) {
this.value = value;
}
d.push([value, o.text]);
}
this.store = new Ext.data.SimpleStore({
'id': 0,
fields: ['value', 'text'],
data : d
});
this.valueField = 'value';
this.displayField = 'text';
}
s.name = Ext.id();
if(!this.lazyRender){
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
Ext.removeNode(s); this.render(this.el.parentNode);
}else{
Ext.removeNode(s);
}
} else if(Ext.isArray(this.store)){

if (Ext.isArray(this.store[0])){
this.store = new Ext.data.SimpleStore({
fields: ['value','text'],
data: this.store
});
this.valueField = 'value';
}else{
this.store = new Ext.data.SimpleStore({
fields: ['text'],
data: this.store,
expandData: true
});
this.valueField = 'text';
}
this.displayField = 'text';
this.mode = 'local';
}
if (this.initialConfig.blankOption) {
var d = [];
d.push ('1','2');
this.store.data = d;
}
this.selectedIndex = -1;
if(this.mode == 'local'){
if(this.initialConfig.queryDelay === undefined){
this.queryDelay = 10;
}
if(this.initialConfig.minChars === undefined){
this.minChars = 0;
}
}
}

});
Ext.reg('mycombobox', Ext.form.MyComboBox);


var combo = new Ext.form.ComboBox({
id: 'searchField_'+pIndex,
allowBlank: true,
store: pDataStore,
displayField: pVisField,
valueField: pCodField,
typeAhead: true,
forceSelection: true,
emptyText:'',
fieldClass: 'inputField',
triggerAction: 'all',
selectOnFocus:true,
mode: 'local',
blankOption: true
}

In the red lines I have tried to modify the array of data.
But I have some errors.
The first: "this.initialConfig.blankOption" generate an error.
If I bypass this error, I have another one:

this.data.getRange is not a function
getRange()(undefined, undefined)ext-all.js (riga 10794)
refresh()()ext-all.js (riga 17705)
setStore()(Object data=[2] baseParams=Object paramNames=Object, undefined)ext-all.js (riga 17810)
bindStore()(Object data=[2] baseParams=Object paramNames=Object, true)ext-all.js (riga 27515)
initList()()ext-all.js (riga 27478)
createSingle()()ext-all.js (riga 1397)
fire()()ext-all.js (riga 1488)
fireEvent()()ext-all.js (riga 1184)
onFocus()()ext-all.js (riga 26051)
onFocus()()ext-all.js (riga 26720)
onTriggerClick()()ext-all.js (riga 27957)
h()()ext-all.js (riga 1694)
getViewWidth()()ext-base.js (riga 10)
[Break on this error] return this.data.getRange(start, end);

Have you got an idea to resolve my error?
Thanks!

neenhouse
24 Sep 2008, 8:30 PM
I see your *a* problem here:

this.store.data = d;


you are overridding a bunch of stuff that is stored in this.store.data, including the method "getRange". I think instead you need to do:

this.store.data[0].data. = d;

throw a debugger; right above that line and look inside that key to make sure where you need to place your data. Lemme know how it goes.

wiulma
25 Sep 2008, 1:02 AM
hi neenhouse!
thanks!
After many test I have modify my component and now it works!!


Ext.form.MyComboBox = Ext.extend(Ext.form.ComboBox, {

initList : function(){
if(!this.list){
var cls = 'x-combo-list';
this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});

var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;

if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}

this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}

if(!this.tpl){

this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';

}


this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});
if (this.initialConfig.blankOption) {
var rowRecord = Ext.data.Record.create(this.store.fields);
var arrFields = new Array();
for (i=0,len=this.store.fields.items.length;i<len;i++) {
if (this.store.fields.items[i].name==this.store.reader.meta.id) {
var pValue = " ";
arrFields [this.store.fields.items[i].name] = this.initialConfig.blankKey;
} else {
arrFields [this.store.fields.items[i].name] = this.initialConfig.blankText;
}
}
this.store.insert(0, new rowRecord(arrFields));
}
this.view.on('click', this.onViewClick, this);

this.bindStore(this.store, true);

if(this.resizable){
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h){
this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
}
}
}

});

cwhitacre
14 Apr 2010, 5:49 AM
I solved this problem in Ext 3.x by:


using '&nbsp;' as the display value for the blank entry
setting valueNotFoundText to the empty string
adding a listener to 'select'


Here's the 'select' listener:


function(combo, record, index)
{
if (record.data.display == '&nbsp;')
combo.setValue('DUMMY'); // trigger valueNotFoundText
}

As you can see, it triggers setting the display value to valueNotFoundText--the empty string--when the display value is '&nbsp;'. ValueNotFoundText and the select event are both documented on ComboBox (http://www.extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox).


P.S. I believe this is the "Blank Text Item" thread (http://www.extjs.com/forum/archive/index.php/t-42173.html) mentioned above: