Javascript 使用ExtJs拆分文本框

我想使用ExtJS以拆分方式为单个标签创建一个文本框。实际上，我的要求是一个电话号码标签，它需要一个文本框，分为3个框，用“-”（连字符）分隔。应该是这样的

电话号码：770-268-3320

将每个括号视为一个文本框。希望你明白我的要求是什么。。。提前谢谢

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()
    });
});

或者您可以在此处查看：

请参阅

---

希望这能满足您的要求。

首先，您应该向我们展示您自己做了一些努力。这部分达到了目的，但我需要将一个文本框拆分为3个框。。无论如何，谢谢你…然后你需要有3个文本框与宽度设置和验证器。在一个文本框中使用CSS进行控制是不可靠的。