PDA

View Full Version : Ext.ux.form.FieldPanel



vtswingkid
27 Aug 2008, 8:20 AM
I needed an extension that allowed me to build fields using multiple items and fields.

The download includes an ipfield and a timefield.

Rotomaul
30 Aug 2008, 4:04 PM
Hi great work!

I am get this error when running you example and clicking "Time 1" field spinner:

File: SpinnerStrategy.js line 46
field is undefined:chrome://firebug/content/blank.gif this.validationTask.delay(500, function(){field.validate()});

Any ideas?

vtswingkid
8 Sep 2008, 4:36 AM
I am not certain, but I would start by making sure all of you links are correct. I do not get this error, so I am guessing that a path is broken.

marrtins
12 Sep 2008, 1:19 PM
Very nice job. I want to point out some issues, maybe for next version :)

1) uxipfield is not populated automaticly (read by reader: )
2) error quicktips does not show (read by errorReader: )
3) form.getForm().findField('IP_STR'); does not work - cannot find field IP_STR

Seems 1) and 2) is really becouse of 3)

However, IP_STR is posted to script along with splited parts IP_STR0,IP_STR1,IP_STR2,IP_STR3

I added uxipfield to my FormPanel this way:


var form = new Ext.form.FormPanel({
...
reader: someXMLReader,
errorReader: someXMLErrorReader,
items: [{
xtype: 'uxipfield',
fieldLabel: 'IP',
name: 'IP_STR'
}]
..
)}


Any quick fix to issues mentioned above? :((

Thanks a lot!

franck34
19 Sep 2008, 10:58 AM
Hi great work!

I am get this error when running you example and clicking "Time 1" field spinner:

File: SpinnerStrategy.js line 46
field is undefined:chrome://firebug/content/blank.gif this.validationTask.delay(500, function(){field.validate()});

Any ideas?

Something like that too here, firebug say :

field is undefined
[Break on this error] this.validationTask.delay(500, function(){field.validate()});


Step to reproduce, change hour first and minute after. Firebug show the error.
I've check about the latest version of spinner seem's it's ok...

Notice that
alternateIncrementValue: 5,
is not working too


Here is the code (plugin):


Ext.namespace('Ext.gui');
Ext.gui.Scheduler = function() {

var cfg = {};

this.init = function(theCfg) {
if (theCfg && theCfg != null) {
cfg = theCfg;
}
}

this.build = function(renderTo) {
var defaultCfg = {
renderTo:renderTo,
title:'Scheduler',
id:'scheduler',
instance:this,
bodyStyle:'padding:5px',
items:[{
xtype:'fieldset',
title:'Settings',
autoHeight:true,
items:[{
xtype:'panel',
layout:'column',
border:false,
defaults: {
bodyBorder:false
},
items:[{
width:200,
autoHeight:true,
defaults:{
xtype:'radio',
name:'scheduleType'
},
items:[{
boxLabel:'One time'
},{
boxLabel:'Daily'
},{
boxLabel:'Weekly'
},{
boxLabel:'Monthly'
}]
},{
columnWidth:1,
items:[{
border:false,
layout:'column',
defaults:{
height:26,
border:false
},
items:[{
width:50,
bodyStyle:'padding-top:2px',
html:'Start :'
},{
width:100,
xtype:'datefield',
showToday:true,
format:'Y-m-d'
},{
width:10,
html:' '
},{
width:200,
xtype:'uxtimefield'
}]
}]
}]
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}
Ext.applyIf(defaultCfg,cfg);
new Ext.FormPanel(defaultCfg);
}
return this;
}

Ext.onReady(function() {
var s=Ext.gui.Scheduler();
s.init({renderTo:'me'});
s.build();
});



Warning you need a <div id="me"></div> somewhere in the page to be able to test.

Franck

Ronhead
24 Sep 2008, 1:20 PM
i download your plugin for testing
but i ve a problem



firebug detected this error,


Ext.ux.form.Spinner is undefined
chrome://firebug/content/blank.gif strategy: new Ext.ux.form.Spinner.TimeStrategy({


whats is this?

thanks

franck34
26 Sep 2008, 4:47 AM
You need to install Ext.ux.form.Spinner too ...

moegal
15 Jan 2009, 8:06 AM
Hi,
I need a date range field. I am trying to create a basic one and have a few problems, can anyone help?

Here is what I have so far. 2 problems so far. 1. The fields are erased when you click on either the start or end date fields. 2. The date format is sent to the server in the verbose format, not the one I need.(m/d/Y). The format I want to post is (m/d/Y,m/d/Y)



Ext.namespace("Ext.ux.form");
Ext.ux.form.DateRangeField = Ext.extend(Ext.ux.form.FieldPanel, {
border: false,
baseCls: null,
layout: 'table',
token: ',',
value: '',
layoutConfig: {
columns: 3
},
width: 180,
initComponent: function()
{
this.items = [{
xtype:'datefield',
format: 'm/d/Y',
width:100,
name: this.name + '0'
}, {
html: '&nbsp;to&nbsp;',
baseCls: null,
border: false
}, {
xtype:'datefield',
format: 'm/d/Y',
width:100,
name: this.name + '1'
}]
Ext.ux.form.DateRangeField.superclass.initComponent.call(this);
}
});
Ext.reg('uxdaterangefield', Ext.ux.form.DateRangeField);


Thanks, Marty

http://www.carterbillboards.com/ext-2.2/examples/fieldpanel/testdaterange.html

mystix
15 Jan 2009, 6:41 PM
@moegal -- check out @shryu's OOSubmit plugin:
http://extjs.com/forum/showthread.php?p=133661

it allows you to define a custom getSubmitValue() method on any Ext.form.Field.
when the FormPanel / BasicForm is submitted, it retrieves the value returned by the getSubmitValue() method (if one exists) instead of the value returned by the Field's getValue() method.

moegal
16 Jan 2009, 3:51 AM
mystic,

thanks, I will check it out.

Marty

peteryjk
5 Mar 2009, 10:08 PM
nice ux, but i have a problem, i can't use the ux in editor grid.. only manage to edit the cell for 1 time, afterthat, cell unable to edit anymore..

wangyu4882
15 Apr 2009, 9:33 PM
I get a issue when I use this extention.

ISSUE:
6 textfields in the 1 FieldPanel.
1. input words in the 2nd textfield
2. when 2nd textfield lost focus,the value I input moved to the 1st textfield.


FIX:


getRawValue : function(){
var v = '';
if(this.rendered){

//modify by wangyu
//this.items.each(function(f){
// if(f.isFormField){
// if(v.length){
// v+=this.token;
// }
// v+=f.getValue();
// }
//},this);

var index = 0;
this.items.each(function(f){
if(f.isFormField){
if(index > 0){
v+=this.token;
}
v+=f.getValue();
index++;
}
},this);
//end
}else Ext.value(this.value, '');
if(v === this.emptyText){
v = '';
}
return v;
},




setRawValue : function(v){
var val = '';
var i = 0;
if(v.length)var vs = v.split(this.token);
else{
var vs = [];
for (i=0; i<this.items.length; i++){
vs[i]='';
}
}
i=0;
this.items.each(function(f)
{
if(i>=vs.length)return false;
if (f.isFormField) {
f.setValue(vs[i]);
//modify by wangyu
//if (val.length) val += this.token;
if (i>0) val += this.token;
//end
val += vs[i++];
}
return true;
},this);
return this.hiddenField.dom.value = val;
},

Nebz
22 Apr 2009, 12:27 AM
Hi,

Very nice component !!!

I have issues to size it nicely... i want that my FieldPanel component to have the size anchored like the rests of my fields but i don't know how to refer to the computed (anchored) size of the Ext.ux.form.DateRangeField component... "this" in the component's items refer to the field but don't support the this.el.getSize()... and this.width isn't yet computed...

May someone help me ?

thanx

example :

COMPONENT :


Ext.ux.form.DateRangeField = Ext.extend(Ext.ux.form.FieldPanel, {
border: false,
baseCls: null,
layout: 'table',
token:';',
isFormField: true,
layoutConfig: {
columns: 3
},
setRawValue: function(v){
Ext.ux.form.DateRangeField.superclass.setRawValue.call(this, v);
},

// private
initComponent : function(){
this.items=[
{
xtype: 'datefield',
format:this.format,
width: (this.width-15)/2,
name: this.name+'_Start',
listeners: {
'focus': function(f)
{
f.selectText();
}
}
}, {
html: '&nbsp;to&nbsp;',
border: false,
width:15,
baseCls: 'x-form-item'
}, {
xtype: 'datefield',
format:this.format,
width: (this.width-15)/2,
// value: '',
name: this.name+'_End',
listeners: {
'focus': function(f)
{
f.selectText();
}
}
}
]
Ext.ux.form.DateRangeField.superclass.initComponent.call(this);
}
});
Ext.reg('daterangefield', Ext.ux.form.DateRangeField);
LAZY CALL :


{
xtype:'daterangefield',
fieldLabel:'Dates from',
id:'test',anchor:'95%',

name:'dateRange',
format:'d/m/Y',
value:new Date().format('d/m/Y')+';'+new Date().format('d/m/Y')
}

moegal
22 Apr 2009, 5:13 AM
Nebz,

When I select the second value the 1st value is erased. How did you resolve this?

Marty

Nebz
23 Apr 2009, 7:41 AM
problem comes from the setRawValue...

so i break the logic :
setRawValue: function(v){}
the hidden field is not setted anymore but i use individual values of components in my FieldPanel

i've kept the getRawValue for setting a startValue to my component

not very logical but i've passed too much time on that problem :)

Zolcsi
7 Jul 2009, 5:33 AM
Hi,

I found a small, little problem with the code:
If the first field is empty, then getRawValue won't append the token for the value. Let me show an example:


Time: |_____| : |__20__| : |__15__|

getRawValue will return "20,15" instead of ",20,15"

My quick fix for that:

Instead of this:


this.items.each(function(f){
if(f.isFormField){
if(v.length)v+=this.token;
v+=f.getValue();
}
},this);


I use this:


var f;
for(var i = 0; i < this.items.length; i++)
{
f = this.items.items[i];
if (f.isFormField) {
if (i != 0) {
v += this.token;
}
v += f.getValue();
}
}


Hope this helps somebody :)