带有 Extjs 的 IP 地址 v4 的表单字段

Posted 2023-02-26

【中文标题】带有 Extjs 的 IP 地址 v4 的表单字段

【英文标题】：Form field for IP address v4 with Extjs

【发布时间】：2011-11-14 15:42:00

【问题描述】：

我用 Extjs 3 创建了一个表单面板，我想创建一个字段来放置一个 IP 地址 v4，就像我有 4 个方块来放置 4 个数字一样。 感谢您的帮助

【参考方案1】：

我在 IP 领域使用了 Robert B. Williams 版本。 只需几个 twink，您就可以将其更改为适合 V4 IP。

代码如下：

/**
* @class Ext.ux.form.TimeField
* @extends Ext.ux.form.FieldPanel
* This class creates a time field using spinners.
* @license: BSD
* @author: Robert B. Williams (extjs id: vtswingkid)
* @constructor
* Creates a new FieldPanel
* @param Object config Configuration options
*/
Ext.namespace("Ext.ux.form");
Ext.ux.form.IpField = Ext.extend(Ext.ux.form.FieldPanel, 
border: false,
baseCls: null,
layout: 'table',
token: '.',
value: '192.168.0.1',
layoutConfig: 
    columns: 7
,
width: 180,
// private
defaults:
    maskRe: /[0-9]/,
    maxLength: 3,
    listeners: 
        'focus': function(f)
            f.selectText();
        
    
,
initComponent: function()

    this.items = [
        xtype:'numberfield',
        width:40,
        name: this.name + '0'
    , 
        html: '.',
        baseCls: null,
        bodyStyle: 'font-weight: bold; font-size-adjust: .9',
        border: false
    , 
        xtype:'numberfield',
        width:40,
        name: this.name + '1'
    , 
        html: '.',
        baseCls: null,
        bodyStyle: 'font-weight: bold; font-size-adjust: .9',
        border: false
    , 
        xtype:'numberfield',
        width:40,
        name: this.name + '2'
    , 
        html: '.',
        baseCls: null,
        bodyStyle: 'font-weight: bold; font-size-adjust: .9',
        border: false
    , 
        xtype:'numberfield',
        width:40,
        name: this.name + '3'
    ]
    Ext.ux.form.IpField.superclass.initComponent.call(this);

);
Ext.reg('uxipfield', Ext.ux.form.IpField);