PDA

View Full Version : Ext.ux.IpV4Field -- form field for entering IP v4 address in "Windows style"



ReBorn
22 Aug 2010, 4:19 AM
This UX is suitable for displaying an IP address (for IP v4 protocol version) in windows-like form (four numberfields, separated with dots).

22072

Source: 22073

ExtJS required version: 3.2.1

Be warned: control has fixed width!

Control can accept regular IP (like 127.0.0.1) or their numeric representation (long integer).

One and only config option is boolean IPAsLong, that forces control to return input result as long integer instead regular IP. All other options are inherited from standard Ext.form.Field

You can use this code free of charge in all your personal and business applications.

No online demo for now, maybe later : (

USAGE:

put some styles in Your app's CSS file:


div.ipv4-field-wrap {
position: relative;
}

div.ipv4-field-input1,
div.ipv4-field-input2,
div.ipv4-field-input3,
div.ipv4-field-input4,
div.ipv4-field-hidden,
{
display: inline;
float: left;
vertical-align: top;
width: 30px;
}

div.ipv4-field-input1-spacer,
div.ipv4-field-input2-spacer,
div.ipv4-field-input3-spacer,
div.ipv4-field-hidden
{
width: 10px;
display: inline;
height: 21px;
float: left;
text-align: center;
vertical-align: 15px;
}

Include ipv4field.js in Your project...

... and, finally, create control in Your form:



{
xtype: 'ipv4field',
name: 'ip',
value: '127.0.0.1'
}

paffinito
5 Oct 2010, 1:43 AM
There is an error on doDisable function.

change from


doDisable: function(disabled){
if(this.input1) this.input1.setDisabled(disabled);
if(this.input2) this.input3.setDisabled(setDisabled);
if(this.input3) this.input3.setDisabled(setDisabled);
if(this.input4) this.input4.setDisabled(setDisabled);
}to


doDisable: function(disabled){
if(this.input1) this.input1.setDisabled(disabled);
if(this.input2) this.input2.setDisabled(disabled);
if(this.input3) this.input3.setDisabled(disabled);
if(this.input4) this.input4.setDisabled(disabled);
}Bye

paffinito
5 Oct 2010, 2:08 AM
I have update setValue function to manage empty field



setValue : function(v) {
if (!Ext.isEmpty(v)) {
if(this.is_numeric(v)) v = this.long2ip(v);

ip_arr = v.split('.', 4);

if(ip_arr.length == 4) {
if(this.input1) this.input1.setValue(ip_arr[0]);
if(this.input2) this.input2.setValue(ip_arr[1]);
if(this.input3) this.input3.setValue(ip_arr[2]);
if(this.input4) this.input4.setValue(ip_arr[3]);
}
} else {
this.input1.reset();
this.input2.reset();
this.input3.reset();
this.input4.reset();
}

if(this.hiddenField) this.hiddenField.setValue(v);
}
Bye

paffinito
5 Oct 2010, 2:46 AM
I have add validateValue function to relay validation on a form



validateValue: function() {
return (this.input1.isValid() && this.input2.isValid() && this.input3.isValid() && this.input4.isValid());
},
Bye