使用ExtJs拆分文本框

Question

I want to create a text box for a single label in split manner using ExtJS. Actually my requirement is a label for a telephone number, which needs a text box splitted into 3 boxes separated by "-" (hyphen). It should be as follows.

Telephone Number: 770-268-3320

consider each bracket as a text box. Hope you understood what my requirement is... Thanks in advance

Ext.onReady(function(){
    Ext.create('Ext.form.Panel', {
        //title: 'Simple Form',
        bodyPadding: 5,
        width: 400,
        // The form will submit an AJAX request to this URL when submitted
        url: 'save-form.php',
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'PhoneNumber',
            name: 'phoneNumber',
            allowBlank: false
        },{
            fieldLabel: 'CustomerName',
            name: 'custCLLI',
            allowBlank: false
        }],

        // Reset and Submit buttons

        renderTo: Ext.getBody()
    });
});

Or you can check here: http://jsfiddle.net/jA8Qy/5/

Answer 1

See this .

Hope this addresses your requirement.