View Full Version : Multiselect component in Architect

27 Sep 2012, 6:34 AM

how to add a multiselect component(xtype='multiselect') to the panel in Architect? I don't see it in the Tools box. Though I also can't set it manually in the View because SA will overwrite it whenever I click 'Save' project..

Is there is any reason why 'multiselect' is not supported by SA?

27 Sep 2012, 7:26 AM
If you want to use a UX in SA, you will need to create an override. At this time, UX are not included in the list of default items.


Peter Tierney
2 Oct 2012, 6:25 AM
I've been a Flex dev for many years now and am wanting to use ExtJS and Sencha Architect(SA) as they give the closet set of complet tools in the JS world with some semblance of real patterns. With that said, there are some pretty big issues with learning ExtJS and one of those is the SA tool which apparently is not a complete tool yet

This multiselect business is a perfect example since the examples show it possible but using SA, not so much.

Also the answer give from scottmartin seems woefully incomplete, at least from a helpful point of view. UX usually means User Experience but I'm assuming that is not what UX means here.

Create an override in SA or where and if in SA how?

The examples are fine except when the don't work in SA and there isn't a good way to see how SA might want to do it.

So far this has been a very frustrating experience just to get simple things like date fields to be limited especially since the examples for date range validation don't work in SA.

Any suggestions?

2 Oct 2012, 6:38 AM
UX stands for User eXtensions for ExtJS(think of them as libraries). To use 'ux' you need to download the corresponding components that you intent to inherit from, like "Ext.ux.form.multiselect" That saying it is still much pain. I ended up using a fieldset with autoscroll and a collection of checkboxes. Works just perfect.

There is a create override button in the SA, but once you use it there is no way back. At this stage SA is a great tool to build the layout of the app quickly, but that is where it stops. Almost everything else I have to write in the custom code. I am sure the future versions of SA will improve and introduce more integration with ExtJs.

My first question is still in place: "Is there is any reason why 'multiselect' is not supported by SA?"

Peter Tierney
2 Oct 2012, 6:50 AM
Thanks geopalam, very helpful answers.

What would be great is if SA would not limit what or where I can put custom code. The FlashBuilder IDE used to be ok for doing layout, but it never gets in the way of writing real code. So far, I'm seeing that once I'm past the layout and basic MVC setup, I will use IntelliJ to do the rest of the work. Of course once I get more comfortable with the framework, I may never touch SA, which is a real shame since it has great potential.

2 Oct 2012, 6:56 AM
Here is an example of using another UX by creating an override: (post #8)

I will look for more detailed information.

As for your question, external UX are current not support directly as a UI component. I believe this is being looked at.

UX are created by users and we have included them as examples, but are not part of our main library. In some cases, we do add popular UX to our main code (rowedit, etc).

I can ask for a SA dev to review this post to see if they can provide any additional information as you have posted this in the Ext forums and not the SA forums.


Peter Tierney
2 Oct 2012, 7:50 AM
I wanted to give a direct example of what I mean by SA getting in the way.

If I use a datefield xtype, I can set a maxValue attribute. If I choose object in SA and put in
Ext.Date.add( new Date(), Ext.Date.DAY, -1)
SA puts it in the code as
maxValue: 'Ext.Date.add( new Date(), Ext.Date.DAY, -1)',
which doesn't work since it's a string and not an object. But there is no way to stop it from quoting it, at least as far as I can tell. Now if this is a bug I could live with editing the generated code, but SA doesn't allow that. Once I edit in IntelliJ to
maxValue: Ext.Date.add( new Date(), Ext.Date.DAY, -1),
it all works.

Hopefully this helps.

Peter Tierney
12 Dec 2012, 9:40 PM
A solution that works for this is to use a controller to set the maxValue since Architect has a bug with the object option.

Have a reference in the controller to your date field like

ref: 'date',
selector: '#yourDateField',
xtype: 'datefield'

and set the maxValue to the day before today like

this.getDate().setMaxValue( Ext.Date.add( new Date(), Ext.Date.DAY, -1));

Hopefully this will help someone else that might run into this Architect bug.