View Full Version : Approach for Rule Builder

2 Nov 2012, 7:18 AM
I need to build a Rule Builder screen using ExtJS, similar to the Rule Builder that you can see in iTunes search or iOS file system search.

I was wondering if anyone has a recommendation on the general approach that could be taken?
I was thinking of using the Tree component in combination with Templates describing what the tree rows will look like. Each tree node becomes a set of input fields, not just a simple node with an ID and a name. But I am relatively new to ExtJS and it is not really clear to me from any of the examples how to use a Tree component with custom rows.

Any suggestions would be appreciated!

Here is a screen shot of a mockup:39781

3 Nov 2012, 12:28 AM
I wouldn't go anywhere near a Tree panel for this.

Instead I'd subclass Container to represent the various groupings shown in your picture. e.g. a 'row' might be one class extending Container, the groups of rows might be another.

You'll also need to give some thought to how to represent the underlying data. Associations might be one way to do it but it may take a bit of trial and error before settling on something.

3 Nov 2012, 4:45 AM
Thanks for the suggestion...the reason I was thinking of a Tree was because of the hierarchy relationships between the groups of rows - conceptually, it is a Tree structure being built and would make it easy to insert/remove the rows. I was hoping that somehow each row in the Tree could be a custom Container instead of a simple name/id node.

Thanks, I'll continue to look into this.