View Full Version : is 1 component per database field too specific?

4 Aug 2010, 6:15 AM

I'm currently working on a new web app and uses ext js for the UI. While working on creating the widgets these past few days, I realized something..

For every model I have in my app, I want to create a few widgets (Form, Grid, etc.) and I was wondering if I should go as far as creating each individual form's elements as a component and use that component inside the form and other widget.

For example, maybe I should create a ProjectNameTextField which has all the property set (maxLenght, RegEx validator, customized error messages, etc.) so if the maxLenght changes, I will only have to make the change to the component and it will spread through my web app.

I thought this would be a good idea, then I asked myself if
1) I really want to do that for all fields
2) This will make a hell of a lot of small component, is this even good design?

So here I am, asking you guys what do you think of this? How are you doing this?


4 Aug 2010, 6:21 AM
This is one of Animals favorite complaints!

You should not create a custom component if your only goal is to configure an existing component. You only want to create a custom component if you are adding specific behavior. In all other cases a factory method is much simpler, e.g.

getProjectNameField: function(config){
return new Ext.form.TextField(Ext.apply({
// default config
}, config));

4 Aug 2010, 6:49 AM

That's what I meant, should I create pre-configured object for every single database fields?

4 Aug 2010, 6:49 AM
Im siding with Condor/Animal on this, though you might consider creating a more generic 'NameField' that contained your general constraints for a 'Name' type of field, and just configure it each time for 'ProjectName', 'CompanyName', 'PetName', etc. Not sure how that fits in with your situation. Might be a waste, just depends how often you have this 'type' of field.

4 Aug 2010, 6:52 AM
My concern was to make sure to have the same validation rules in the backend and the frontend. I was thinking that if I let the frontend developper work out their validation each time.. that sooner than later, it will be a mess to update the validation rules for a specific fields without having to go through the whole app...

4 Aug 2010, 6:58 AM
You could centralize those types of settings as well...make a config.js or whatever...


myapp.Config.Constraints.ProjectName = {vtype:'name',maxLength:100};

Then in your code...

var CompanyName = Ext.applyIf({fieldLabel:'Company Name',name:'companyName'},myapp.Config.Constraints.ProjectName);
items: [CompanyName]

Just a thought.

4 Aug 2010, 7:02 AM
Well, I gotta say I like that idea...

This is exactly why I posted to the forum, knowing someone would have such a great idea :)
That way, I could have a file that has all the validation settings.. and People would refer to that file!

Are there any real world project (probably open-source) that uses extensively ExtJS that I can look at? I mean the example on the site are pretty damn good to learn, but I'd like to see a real world web app using it so I can take a look..?

4 Aug 2010, 7:07 AM
I put together a sample app for JSConf that shows how I generally structure an ExtJS app. Without all of the nice directory structure and such, just one big [email protected]$k file :)