[2.0] ComboBox with custom display text

[OutpostMM]

Here's a combobox extension where you can define 2 additional config options to have it automatically replace text when it shows the value in the field after a selection is made. I had a use for this when I wanted to use   characters in the list options to indent them, but did not want them to show up in the field text. For lack of a better name I just called it CustomCombo.


Ext.ux.CustomCombo = Ext.extend(Ext.form.ComboBox, {

findText: false,
replaceText: false,

initComponent:function() {
Ext.ux.CustomCombo.superclass.initComponent.call(this);
},

setValue: function(c) {
Ext.ux.CustomCombo.superclass.setValue.call(this, c);
if (this.findText !== false && this.replaceText !== false)
{
var text = this.lastSelectionText;
if (Ext.isArray(this.findText))
{
var repl;
for (var i = 0; i < this.findText.length; i++)
{
if (Ext.isArray(this.replaceText))
repl = this.replaceText[i];
else
repl = this.replaceText;
text = text.replace(this.findText[i], repl, 'gi');
}
}
else
{
text = text.replace(this.findText, this.replaceText, 'gi');
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.lastSelectionText = text;
}
}
});

Ext.reg('customcombo', Ext.ux.CustomCombo);

Here are a few examples:


{
xtype: "customcombo",
name: "usergroup",
findText: ["&nbsp;", "&trade;"],
replaceText: ["", "(tm)"],

...
}
That will replace "&nbsp;" with "", and "&trade;" with "(tm)".


{
xtype: "customcombo",
name: "usergroup",
findText: ["&nbsp;", "&trade;"],
replaceText: "",

...
}
That will replace both "&nbsp;" and "&trade;" with "".


{
xtype: "customcombo",
name: "usergroup",
findText: "&nbsp;",
replaceText: " ",

...
}
That will just replace "&nbsp;" with " ".

So with a data set like this for the store:


[
{
"val":0,
"name":"All User Groups"
},
{
"val":"27",
"name":"&nbsp;Australia"
},
{
"val":"39",
"name":"&nbsp;&nbsp;Capital Territory"
},
{
"val":"40",
"name":"&nbsp;&nbsp;&nbsp;Canberra"
}
]
The options in the dropdown list will be properly indented with the &nbsp; characters, but when someone makes a selection it will only display the name.

[mystix]

one question -- why not simply specify your own custom tpl config?

[OutpostMM]

I just haven't used templates before, when I was thinking of a solution this is what I thought of (i.e. "when all you have is a hammer, everything looks like a nail"). Can a template be used to solve this same issue?

[mystix]

if you only need to format the combo's list items, then yes a custom tpl will solve your problem (of having indented list items).

check out http://extjs.com/deploy/dev/examples/form/forum-search.html for a working example.

[OutpostMM]

That looks useful, I'm not sure if that would solve my issue though, I'm not sure how to tell the template that "Canberra" needs to be "&nbsp;&nbsp;&nbsp;Canberra" (or a div w/ padding), where "Australia" just needs to be "&nbsp;Australia". Admins in my application can create whatever nested user groups they want, so the goal is to show the list of usergroups in a combo list and indent them to show whatever nesting was done, the PHP script is responsible for adding the indenting. So I would be able to have PHP send a value telling it what indent level it should be at, but I'm not sure if the template can use a loop or something (or just multiplication) to specify the right indenting for the item, the forum search example just looks like a text replacement in the tpl config. I'll seek out some template guides and take a look through them, thanks for the tip.

edit: It looks like I can use basic math, so that might be a better solution in this case. Still, hopefully someone will find the extension useful.

[Jangla]

I realise this is quite an old post but I feel that posting a solution, no matter how late, may help someone in future. This solution also works in 3.0.

So here's the premise: this is a JSON loaded combobox that results in indented items. You need to make sure your php code passes back different class names for each level of indentation you need and then you need to create the required css to pad left for each of those class names.



var regionStore = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [
{name : "id", type: 'int', mapping: 'id'},
{name : "indentClass", type: 'string', mapping: 'indentClass'},
{name : "text", type: 'string', mapping: 'text'}
],
url : 'path/to/your/php/code.php'
});

// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="combo-value {indentClass}"><span>{text}</span></div></tpl>'
);

var regionCombo = new Ext.form.ComboBox({
store: regionStore,
displayField: 'text',
valueField: 'id',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText: 'Select a value...',
selectOnFocus: true,
width: 200,
listWidth: 200,
tpl: resultTpl,
itemSelector: 'div.combo-value',
iconCls: 'no-icon',
onSelect: function(record){
window.location = String.format('http://www.your-domain.com/index.php?id={0}', record.id);
}
});


...and then your CSS would be something as simple like:



...
.parentValue{font-weight: 700; font-size: 12px}
.indentedValue{font-size: 11px; padding-left: 10px}
...