Forms, ComboBox, maxLength question

[MaxT]

Hello.

I have a question about using the maxLength property with ComboBoxes in a Form. See the code extract below for the combo box I have created in a Form Column.

I have set maxLength=2 for the comboBox. I would expect this to limit users to entering a maximum of 2 characters, just like the HTML "maxlength" property for an input element of type text. If I examine the generated HTML there is not a "maxlength" property present for the relevant input element.

Question: is this the correct behaviour for the ComboBox, or should it be preventing users from entering more than two characters?

Thanks to anyone who can answer this.

Max





f.column(
{width: "auto", labelSeparator: ""},

new Ext.form.ComboBox(
{
fieldLabel: "hr",
name: "from-hour",
mode: "local",
store: new Ext.data.SimpleStore({fields: ["hour"],data : HOURS}),
displayField: "hour",
allowBlank: false,
forceSelection: true,
maxLength: 2,
vtype: "h24",
validation: validate_hour24,
typeAhead: true,

triggerAction: "all",
emptyText: "",
selectOnFocus: true,
width: 50,
listWidth: 50
}
)

);

[MaxT]

To add a bit more detail.

What happens if I type in more than 2 characters is that all the characters are displayed, I get a red warning outline on the box, and an error message when I mouse over that says "the maximum length for this field is 2".

To get the actual behaviour I want I've found that I can override the default settings using the following:


autoCreate: {tag: "input", type: "text", maxlength: 2},

I reckon that the Ext "maxLength" property should be called something else, because it doesn't do what the standard "maxlength" HTML property does. In many situations I can imagine that many people may want this default behaviour. I guess there would be other ways round this, like writing a custom input handler to limit the length, but it seems a bit pointless when there is a standard HTML element that does the same thing.

Any clarification on how "maxLength" is supposed to work are welcome.

Thanks,

Max

[masa2]

Hi Max,
try this:

var cb = new Ext.form.ComboBox(
{
fieldLabel: "hr",
name: "from-hour",
mode: "local",
store: new Ext.data.SimpleStore({fields: ["hour"],data : HOURS}),
displayField: "hour",
allowBlank: false,
forceSelection: true,
maxLength: 2,
vtype: "h24",
validation: validate_hour24,
typeAhead: true,

triggerAction: "all",
emptyText: "",
selectOnFocus: true,
width: 50,
listWidth: 50
}
);
cb.getEl().set({maxlength: 2});

f.column(
{width: "auto", labelSeparator: ""},

cb

);

[MaxT]

Thanks for the suggestion. That is probably a better way to apply the fix because, then you don't have to worry about whether the autoCreate is missing something vital out. Max

[KRavEN]

cb.getEl().set({maxlength: 2});

That only works for me in Firefox. IE it has no effect. Anyone know the fix for IE?