PDA

View Full Version : Ext.ux.form.SuperField 1.0 beta



danh2000
18 Sep 2008, 3:43 AM
Hi,

I've created a new form component that handles the capture of sub items, sort of like a form within a form.

You can see my blog post here (and download the component):

http://technomedia.co.uk/blog/2008/09/superfield-ui-component-for-ext-js-javascript-library/

and some examples here:

http://technomedia.co.uk/superfield/examples.html

It's an alpha release. Before the 1.0 release I will refactor and document all of the code and generate and publish some external docs. Oh, and fix any bugs of course.

Let me know what you think and if you have any suggestions.

moegal
18 Sep 2008, 4:39 AM
looks great, I see you added the edit functionality as well as other features, very nice.

Marty

danh2000
18 Sep 2008, 5:41 PM
Thanks Marty - Edit was my main agenda for this release.

If you manage to try it out, I would appreciate some feedback, suggestions, bugs etc.

Thanks.

danh2000
21 Nov 2008, 1:51 AM
I've updated this component to a beta version.

I've re-written and re-organised a lot of the code and added a couple of new features.

I've also fixed up the integration with BasicForm (particularly the setValues method).

If anyone's interested, I've got a blog post here:

http://technomedia.co.uk/blog/2008/11/superfield-1-beta/ (http://technomedia.co.uk/blog/2008/11/superfield-1-beta/)

Some API Doc's here: http://technomedia.co.uk/superfield/docs/

Some examples here : http://technomedia.co.uk/superfield/examples.html

And finally, you can download it here: http://technomedia.co.uk/superfield/SuperField1beta.zip

nteller
23 Nov 2008, 4:17 AM
That's totally terrific !!!
Can't find a bug right now.
The only thing is that 'allowEdit' doesn't work for me.
Thanks for sharing !

CU

danh2000
24 Nov 2008, 11:04 PM
That's totally terrific !!!
Can't find a bug right now.
The only thing is that 'allowEdit' doesn't work for me.
Thanks for sharing !

CU

Thanks for the feedback and sorry for the slow reply..

Can you please ellaborate on the allowEdit problem - Example 4 at the URL below demonstrates this option set to false (true is the default) and shows that the edit button is not rendered for the items in the summary.

SuperField Examples (http://technomedia.co.uk/superfield/examples.html)

Thanks again.

danh2000
25 Nov 2008, 5:44 PM
I've updated this component again with custom renderers and custom classes, so you now have a lot more control over the display of the summary as the pic below shows:

http://technomedia.co.uk/blog/wp-content/uploads/2008/11/sfexample6.png

More info here:

SuperField 1.0 Beta2 (http://technomedia.co.uk/blog/2008/11/superfield-10-beta-2/)

mjlecomte
25 Nov 2008, 6:03 PM
I forget, didn't one of your earlier versions of this have inline editing? Sorry, if I'm confusing this with something else.

danh2000
25 Nov 2008, 6:49 PM
I forget, didn't one of your earlier versions of this have inline editing? Sorry, if I'm confusing this with something else.

Hi Michael,

Sounds like an editor grid ;)

I've never had inline editing; maybe that was wishful thinking - I'm not sure that I'd like to tackle it either :s

Frenky
15 Dec 2008, 3:11 AM
I think this is a great extension
Thanks for shares

piston
22 Dec 2008, 7:27 PM
really great - will be using it very soon, thanks for sharing

danh2000
23 Dec 2008, 4:00 PM
@Frenky, @piston,

Thanks for the feedback... there are a couple of small 'special case' bugs that I'm aware of in the current code - these have been fixed in my dev version, which I will release after Christmas.

Please let me know if you have any issues.

Thanks,

Dan

elfantasy
31 Dec 2008, 12:27 AM
@Frenky, @piston,

Thanks for the feedback... there are a couple of small 'special case' bugs that I'm aware of in the current code - these have been fixed in my dev version, which I will release after Christmas.

Please let me know if you have any issues.

Thanks,

Dan
small 'special case' bugs <------ did you mean the edit feature bug?

at your example page, the edit feature only work normally at the first time
after that, the listener of the button is gone away...

i also tried the example at IE 6, the edit feature is not working normally

sorry for my english ... and hope this help you to debug....:)

piston
7 Jan 2009, 8:57 AM
what input mask are you using for the datefield?

piston
21 Jan 2009, 11:03 AM
for some reason I'm not getting the edit button to show up once I add an item - is this a known problem or easy fix? The delete button shows up so I know the gif is there

Scorpie
21 Jan 2009, 12:37 PM
Can the "add" button in your example 5 align to the right side?

danh2000
21 Jan 2009, 4:57 PM
for some reason I'm not getting the edit button to show up once I add an item - is this a known problem or easy fix? The delete button shows up so I know the gif is there

I haven't seen any problems - would you like to post your code and I'll take a look?


Can the "add" button in your example 5 align to the right side?

Not in the current implementation - that right side is reserved for the error icon when invalid - I will look at implementing this though... maybe instead of headerPosition accepting 'top' and 'bottom' I'll change it to have an addButtonPosition which accepts 'tl', 'tr', 'bl' etc...

If interested, you can grab a newer version here which includes a bug fix and a couple of tweaks:

http://technomedia.co.uk/superfield/SuperField1beta3.zip

Cheers,

bhaidaya
11 Feb 2009, 9:46 AM
If you change this line of code your superfield can be lazy instantiated..


createItemConfig : function(){
this.itemConfig = {};
for(var i = 0, j = this.items.length, head, item, config; i < j; i++){
item = this.items[i];
config = {
name : item.name,
cls : item.summaryCls || '',
header : item.summaryDisplay ? item.summaryHeader ? item.summaryHeader : item.fieldLabel : false,
//combo : item.getXType() == 'combo' ? true : false,
combo : item.xtype == 'combo' ? true : false,
renderer : item.summaryRenderer || null
};
probably best to just check to see if item.getXtype() is a function and use it if it is otherwise only look for the item.xtype property.




Ext.reg( 'superfield', Ext.ux.form.SuperField);



This is your example code redone with lazy instantiation:


/**************************************************************************
* Example 1
*/
var example1Form = new Ext.form.FormPanel({
id: 'form1',
title: 'Example 1',
renderTo: 'example1',
bodyStyle: 'padding:10px;',
width: 700,
url: 'somedodgyurl.php',
items: [{
xtype: 'fieldset',
title: 'Friends',
autoHeight: true,
items: [{
xtype: 'superfield',
minItems: 1,
minItemsText: 'You must add at least {0} friend',
maxItems: 3,
maxItemsText: 'You can add a maximum of {0} friends',
defaultItemText: 'Friend',
items: [{
xtype: 'textfield',
name: 'forename',
fieldLabel: 'Forename',
allowBlank: false
}, {
xtype: 'textfield',
name: 'surname',
fieldLabel: 'Surname',
allowBlank: false
}, {
xtype: 'textfield',
name: 'dateOfBirth',
fieldLabel: 'Date of Birth',
allowBlank: false
}]
}]
}],
buttons: [{
text: 'Submit',
handler: function(){
Ext.getCmp('form1').getForm().submit();
}
}]
});



I had to make these changes to make this work and test it in my forms. Lazy Instantiation rocks for things like tabbed interfaces.. (the super field won't render till the tab is activated etc.)

What License are you releasing this under?

Nice smooth functionality.. kudos.

bhaidaya
11 Feb 2009, 10:08 AM
nice one.

Missed your post previous to mine and the beta3 link..

chalu
17 Feb 2009, 1:37 PM
This is indeed very good, the only way I could do this in the past was to use Saki's RecordForm extension with a Grid.
Also, the example 6 (your favourite) had a phpMode config that is set to true, what does this do. I'd also like to ask if it is possible to load 'values' into it like Ext.form.BasicForm.load.

I also personally think that if allowEdit is set to false then the 'delete' button should also not be offered (why should I be able to delete a record that I don't have rights to even edit ??), you know, like a readOnly field. Finally, this utility should have a 'meta' ability i.e wait for it's values, allowEdit (and related config) to come from the server and then act accordingly so that (In a real application), the user can only see certain records (values) and can only edit if allowed, all these been info that the server sends as metadata. Just my thoughts :):)

Big Thanks.

danh2000
18 Feb 2009, 6:06 PM
This is indeed very good, the only way I could do this in the past was to use Saki's RecordForm extension with a Grid.
Also, the example 6 (your favourite) had a phpMode config that is set to true, what does this do. I'd also like to ask if it is possible to load 'values' into it like Ext.form.BasicForm.load.

I also personally think that if allowEdit is set to false then the 'delete' button should also not be offered (why should I be able to delete a record that I don't have rights to even edit ??), you know, like a readOnly field. Finally, this utility should have a 'meta' ability i.e wait for it's values, allowEdit (and related config) to come from the server and then act accordingly so that (In a real application), the user can only see certain records (values) and can only edit if allowed, all these been info that the server sends as metadata. Just my thoughts :):)

Big Thanks.

Hi Chalu,

Sorry I am really busy at the moment.....

See the component docs at the URL below - they may of help:

http://technomedia.co.uk/superfield/docs/

I'll also summarise answers to your questions:

1. phpMode ensures that array data is submitted correctly with [] at the end of the field names.

2. re: allowEdit and delete button - see the allowDelete config option - I'd prefer not to enforce anything - up to you to decide what you need.

3. Values can either be set directly on the component, or it will also intercept any call to it's parent form BasicForm.setValues method and grab the relevant data. The BasicForm.setValues method is called after a load action, so the component will get the data.

See here for an example of the form interception (An old verison of the component I believe, but the concept is the same):

http://technomedia.co.uk/superfield/testing.html

I didn't follow exactly your metadata request, but I often configure components on the fly based on server data without any need for special methods to allow this - I believe there is also a generic user component somewhere that does remote loading for you...

Hope this helps - I must go as I have loads to do.

Dan :)

sisamsee
25 Apr 2009, 6:03 PM
wow great..can you upload zip file contains all samples..i need this to use on my form..and i still newbie..so please upload your full examples include php, and mysql file.

i really appreciate if you post your superfiled full examples.


best regards

danh2000
25 Apr 2009, 9:20 PM
wow great..can you upload zip file contains all samples..i need this to use on my form..and i still newbie..so please upload your full examples include php, and mysql file.

i really appreciate if you post your superfiled full examples.


best regards

Hi Sisamsee,

Everything you need is in the example page - simply view source here:

http://technomedia.co.uk/superfield/examples.html

sanjshah
3 Jun 2009, 2:09 PM
Hi,

Could someone please tell me know in what format is the information sent, is it in an array for each field?

I've tried setting my backend page but cannot get this to work.

Thanks

danh2000
3 Jun 2009, 2:49 PM
Sanj,

Yes, it's array data.

Take a look at the example page here:

http://technomedia.co.uk/superfield/examples.html

If you use Firebug, you can see the posted data in the net tab.

For instance, I used example3 and this is what is displayed for the posted data:



email[] test@example.com
email[] dan@example.com
type[] Work
type[] Home


Regards,

Dan

sanjshah
4 Jun 2009, 9:21 AM
Thanks Dan,

Finally got it working.

Could I ask is it possible to do something (erase all the data on the form) after a sucessful insert?

Also for some reason only in IE I get an error but cannot find where the error is?

Error Message: 'undefined' is null or not an object
URL: http://localhost/testsite/ext-2.2/adapter/ext/ext-base.js



<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
/**************************************************************************
* Example 2
*/
var example2 = new Ext.ux.form.SuperField({
minItems:1,
stripeRows:false,
minItemsText: 'You must add at least {0} friend',
addButtonText:'Add Friend',
msgTarget:'side',
values: [
{
forename: 'forename1',
surname: 'surname1',
dateOfBirth:'04/07/1970',
sex: 'Male'
},{
forename: 'forname2',
surname: 'surname2',
dateOfBirth:'04/07/1969',
sex: 'Female'
}
],
items: [
new Ext.form.TextField({
name: 'forename',
fieldLabel: 'Forename',
allowBlank:false,
summaryDisplay:true,
allowBlank:false
}),
new Ext.form.TextField({
name: 'surname',
fieldLabel: 'Surname',
allowBlank:false,
summaryDisplay:true
}),
new Ext.form.DateField({
name: 'dateOfBirth',
fieldLabel: 'Date of Birth',
allowBlank:false,
summaryDisplay:true,
summaryHeader: 'DOB'
}),
new Ext.form.ComboBox({
name:'sex',
fieldLabel:'Sex',
store:['Male','Female'],
allowBlank:false
})
]
});

var example2FieldSet = new Ext.form.FieldSet({
title:'Reviewer Names',
autoHeight:true,
items: [
example2
]
});

var example2Form = new Ext.form.FormPanel({
id:'form2',
title:'Example 2',
renderTo:'example2',
bodyStyle: 'padding:10px;',
width: 700,
url:'otherjsonB.asp',
baseParams:{sqlneeded: "superfieldtest"},
items:[
example2FieldSet
],
buttons:[{
text: 'Submit',
handler: function(){
Ext.getCmp('form2').getForm().submit();
}
}]
});
});
</script>


Thanks for a great plugin!

danh2000
4 Jun 2009, 4:21 PM
Sanj,

I don't know what you mean by successful insert, do you mean a form submission? See the docs for BasicForm - you have the 'actioncomplete' event that you can subscribe to.

To reset form values, you can use form level 'reset' or component level 'reset' methods (see the ext docs) or for the SuperField you could use 'clearValue'.

SuperField is documented here (Note that it extends Ext.form.Field so those configs and methods also apply):

http://technomedia.co.uk/superfield/docs/

Regards,

Dan

PS. I don't have access to your localhost.

sanjshah
5 Jun 2009, 11:53 AM
Dan,

I not sure what has happened in the last day - but on your example page with the examples I seem not to be able to edit any record more than once, both in IE and Firefox - no error messages but nothing happens - could you confirm please.


Sanj,

I don't know what you mean by successful insert, do you mean a form submission? See the docs for BasicForm - you have the 'actioncomplete' event that you can subscribe to.

To reset form values, you can use form level 'reset' or component level 'reset' methods (see the ext docs) or for the SuperField you could use 'clearValue'.

SuperField is documented here (Note that it extends Ext.form.Field so those configs and methods also apply):

http://technomedia.co.uk/superfield/docs/

Regards,

Dan

PS. I don't have access to your localhost.

danh2000
5 Jun 2009, 6:28 PM
Sanj,

Nothing has changed - I can edit the examples without problems.

?

sanjshah
6 Jun 2009, 3:49 AM
Dan,

Yes it working - apologies.

When I send data for an insert everthing works fine except when on of the fields conatins a ' as in someones name i.e. Tom O'Brien - how can I eliminate this?

Sanj

e1kraff
7 Sep 2009, 6:14 PM
Please help!
on the form are TextField and SuperField, when I press Enter on the TextField function is triggered Add a SuperField. How to fix this bug?

danh2000
7 Sep 2009, 6:32 PM
Please help!
on the form are TextField and SuperField, when I press Enter on the TextField function is triggered Add a SuperField. How to fix this bug?

I'm sorry but i have no idea what you have done.. please post a repeatable test case and tell me which version of Ext you are using, which browsers and versions etc.

This post may help:

http://www.extjs.com/forum/showthread.php?t=71015

e1kraff
7 Sep 2009, 7:24 PM
Ext version tested:


Ext 2.2.1
Ext 3.0.0



Adapter used:


ext



css used:


only default ext-all.css
css from SuperField.css (from archive SuperField1beta3.zip)



Browser versions tested against:


FF3.5.1 (firebug 1.4.2 installed)



Operating System:


WinXP Pro
Win2003 Server



Description:


on the form are TextField and SuperField. When enter the text in the TextField and press Enter then fires the Add button at the SuperField. How to disable?





{
xtype: 'textfield',
name: 'field'
}, {
xtype: 'superfield',
maxItems:5,
minItems:1,
minItemsText: 'You must add at least {0} email address',
tabIndex: 12,
msgTarget:'under',
addLabel: 'Add Email Address',
stripeRows:false,
width:350,
items: [
new Ext.form.TextField({
name: 'email',
fieldLabel: 'Email',
summaryDisplay:true,
sumamryHeader:'Email Address',
summaryCls:'myEmail',
tabIndex: 13,
allowBlank:false
}), new Ext.form.ComboBox({
name:'type',
tabIndex: 14,
fieldLabel:'Type',
summaryDisplay:true,
store:[['001','Home'],['002','Work']],
hiddenName: 'type',
allowBlank:false
})
]
}

danh2000
7 Sep 2009, 7:44 PM
I'll admit that I haven't even looked at this component for a long while, so I don't even know if it's compatible with recent versions of Ext.

Thanks for the test case - I'll have a look and reply later today.

danh2000
7 Sep 2009, 8:44 PM
This only occurs in Firefox and appears to be a bug - only the button was given a click handler, but the form is reacting..

For a quick fix, look for the setupFormInterception method and find this code:


this.findParentBy(function(p){
if(p.getForm){
form = p.getForm();
}
});

Underneath, paste the following:


form.getEl().on('keydown', function(e){
if(e.getKey() == e.ENTER){
e.preventDefault();
}
});

Update:

It's a known issue with Firefox and the fact that I have used a 'button' element for the add button - the longer term fix is to replace the button element, but to be honest, the component could do with a rewrite or at least a tidy up..... hmmm!

Thanks for the report.

e1kraff
8 Sep 2009, 12:46 AM
Thanks! It's work!

Xouqoa
21 Sep 2009, 3:37 PM
My mistake - not a bug.

danh2000
21 Sep 2009, 4:18 PM
Xouqoa,

It has nothing to do with the SuperField extension - it doesn't work anywhere without SuperField involved:


new Ext.form.FormPanel({
region: 'center',
title: 'Test',
items: [new Ext.form.TextField({
name: 'telephone',
fieldLabel: 'Tel',
allowBlank: false,
regex: '/\(?\b[0-9]{3}\)?[-]?[0-9]{3}[-]?[0-9]{4}\b/',
regexText: 'Phone number must be formatted as xxx-xxx-xxxx.'
})]

}),

Xouqoa
21 Sep 2009, 6:58 PM
Hmm, okay. I'll have another look at it. I had it working in a previous set up, but maybe I configured something incorrectly. Sorry for the false alarm. :)

danh2000
21 Sep 2009, 7:01 PM
@Xouqoa, No problem!

Xouqoa
22 Sep 2009, 7:34 AM
regex: '/\(?\b[0-9]{3}\)?[-]?[0-9]{3}[-]?[0-9]{4}\b/',

should have been

regex: /\(?\b[0-9]{3}\)?[-]?[0-9]{3}[-]?[0-9]{4}\b/,

No ' characters needed. *facepalm*

finkster
14 Mar 2010, 3:00 PM
Not sure if this extension is still being developed or not, but I've got an issue with Internet Explorer and I'm wondering if anyone else has run into the same problem?

I'm using SuperField 1.0 beta3 (the latest version that I could find) with Ext 3.0.0. It works fine in FireFox, but I'm having problems getting it to work with IE. When I call the setValue method to load data, I get an "object is null or not defined" error message from IE. After putting some debug statements into the code, it appears that SuperField's onRender method is not being called in IE, but it is in FF. Does anyone know what could cause IE not to call onRender?

I can't post my code, but I create my main panel (border layout) in an Ext.OnReady block, so in theory the dom should be loaded before the main panel and SuperField panel is created.

I've read the documentation on creating extensions, but it's not very clear on when the onRender method is actually called. Does anyone know when this method gets called? initComponent is called when the page is loaded, but in FF onRender does not get called until after I explicitly call the setValue method, and it doesn't get called at all in IE.

Any help would be appreciated. This is a nice extension and I can't find anything else that does the same thing, so I would really like to get this working. Thanks.

finkster
15 Mar 2010, 12:11 PM
I solved the issue. The SuperField was contained in a minimized FieldSet, so at the time that I called setValue on it, it had not officially been rendered and hence the onRender method was not called. I set the config option 'forceLayout: true' on the containing FormPanel, and that fixed the problem. Seems simple now, but it took me forever to figure it out.

moegal
5 Aug 2010, 12:45 AM
Dos anyone have the superfield ux?
Marty

prophet
6 Sep 2010, 12:43 PM
I'm using Ext 3.2.1 and when I press the "Add" button, the script lags out... Is there an updated version of this?
Thanks!