Sencha Inc. | HTML5 Apps

Blog

7 Overlooked Features of Sencha Architect

May 08, 2013 | Patrick Chu

Sencha Architect is a visual development tool that can greatly boost your Sencha programming productivity. You can use it to rapidly create both Ext JS and Sencha Touch applications.

Knowing these 7 productivity-enhancing features can make you even more productive than you already are!

1. Property filter keyboard shortcut: Ctrl-E (⌘-E on Macs)

Ctrl-E

How it’s done

Type Ctrl-E (⌘-E on Macs) to place the cursor in the config/property filter field.

Discussion

I’m always using the property filter to narrow down what is often a huge list of config properties into three or four that I can quickly click on and edit.

Here’s the editing sequence that I use a lot:

  1. Click on a component in the Project Inspector
  2. Type Ctrl-E to put the cursor in the property filter
  3. Type two or three characters to narrow down the list of configs
  4. Edit the property that I want to change

2. Lock the filter

Lock the Filter

How it’s done

Click the “lock” icon in the config/property field. This will lock the current filter in place as you click on different items in the Project Inspector.

Discussion

You may have noticed that when you click on a new item in the Project Inspector or in design view, the filter is not applied until you type “Ctrl-E (or ⌘-E)” and then ENTER. However, if you click the “lock” icon in the filter area, your filter will be applied automatically as you change items.

You can use this feature to quickly edit the same feature on many similar items. For example, you can type “align” in the filter field (or even “al”), then click on the grid columns where you want to change the alignment.

3. Collapse the Toolbox categories or the entire Toolbox

Collapse toolbox categories     Collapse entire Toolbox

How it’s done

To close just the Toolbox categories, click the little arrow (barely visible) about halfway down the categories splitter. To close the entire Toolbox, click the arrow at the far right side of the Toolbox header.

Discussion

I almost always keep the Toolbox categories pane hidden. I keep “Everything” selected and then filter for what I need. After hiding the categories, you can then reduce the Toolbox’s width to give yourself more room.

If you need even more space, you can collapse the Toolbox completely by clicking on the collapse arrow on the right-hand side.

4. Add a reference to an external Third Party JavaScript API

Adding a Javascript resource     Editing a Javascript resource

How it’s done

Click on the [+] button in the Project Inspector, click on “Resource”, then click the “JS Resource” sub-menu item.

Discussion

When you add a reference to an external JavaScript API in Sencha Architect, you can then call those library functions from anywhere in your Architect application. Some examples of the hundreds of third party JavaScript libraries available include Google Maps, Google Analytics and jQuery.

If you want to see a fully functioning Google Maps Tab Panel in an Architect app written in about 30 lines of code, add a comment below, and I’ll be happy to cover this in a future blog article.

5. Promote to Class

Promote to class

How it’s done

RIGHT-CLICK on the container or component that you want to promote (i.e., save to a separate class file). Choose “Promote to Class” from the context menu.

Discussion

When you first start building your Sencha Architect application, you add components to the viewport or to a Tab Panel. As you start adding more components, the items array of these containers becomes unwieldy, and at that point it’s best to create separate classes for your bigger components.

When you create a separate class, you assign it a custom xtype, which will be used to reference your class in the parent’s item array. You can also use the custom xtype in a ref selection or a ComponentQuery.query() call in your controller.

6. Add a Store without a Proxy attached

Create Store without a Proxy

How it’s done

To create a Store with no proxy attached, click the top level “Store” after clicking the [+] button in the Project Inspector, as shown in the screen shot above.

Discussion

Normally, when you click the [+] button and then hover over the “Store” menu item, you will see a list of different Stores in the sub-menu. Whichever Store you choose will have a proxy attached to it.

Sometimes you’ll want to create a Store without a proxy attached, maybe because you already have a proxy attached to your model. Clicking on the top-level Store menu item adds a Store without a proxy attached.

Additional Notes

A “proxy”, when attached to either the Model or the Store, is how you define where the API resides. The “url” and “type” (json and xml types are built in) properties are required.

When would you attach a proxy to a Model versus a Store? If you are using the Model.save() method and creating Models instances individually, then you would attach the proxy to the Model.

7. List Tabs keyboard shortcut: Ctrl-L (⌘-L on Macs) – New for version 2.2!

List open tabs with Ctrl-L

How it’s done

Type Ctrl-L (⌘-L on Macs) to see a list of currently open tabs. Arrow up and down to move within the listing, and hit ENTER to select and focus a tab.

Discussion

New for Sencha Architect 2.2: each class in your Architect application can be placed in its own tab. This allows you to quickly edit different areas of your application (for example, a grid and its associated store) without having to scroll back and forth in your Project Inspector. You can close tabs at any time.

The problem arises when you have more tabs than can fit in the tab area. The solution is to type “Ctrl-L (⌘-L on Macs)” to list all open tabs. (You can also click on the “List Tabs” icon on the right side of your tab area.)

Then, using your up and down arrow keys, you can quickly navigate to a tab and hit ENTER to focus that tab. For now, you can’t move tabs by dragging them, but you can close and re-open tabs if you want to change the order and put related tabs near each other.

Conclusion

I hope that some of these features are new to you, and that this article helps to save you some time.

The Sencha Architect features covered here are only a tiny fraction of what’s available. Sencha Architect is covered in great detail in the 5-day Ext JS and Sencha Touch classes offered all over the world through Sencha Training, taught by Sencha-certified instructors. Visit sencha.com/training for more details.

If you have any feedback, please add it to the comments section.

There are 6 responses. Add yours.

Marco Piccolino

12 months ago

Thanks for sharing these tips!

Uche Ngadi

12 months ago

Nice tips

shaan gola

12 months ago

Really nice tips it helps a lot thanks for sharing

Arch

12 months ago

Some of these are certainly overlooked features.

It would be nice to be able to collapse the project inspector and config panes to have more room while editing code. Beign able to perform all the actions mentioned in these tips, such as locking the filter, via shorcuts and a full list of available shortcuts would also be nice.

Can you provide a use case for tip #6? How would the store by used?

Patrick Chu

12 months ago

If you already have a Proxy on the Model that the Store is using, then the Store will use the Model’s Proxy, and there’s no need to declare the Proxy again for the Store. One advantage of declaring the Proxy on the Model instead of the Store is that you can send single rows to the server with Model.save() without a Store ever getting involved. By comparison, Store.sync() will send down all the accumulated changes at once.

Kazuhiro Kotsutsumi

12 months ago

I translated it into Japanese.

http://www.xenophy.com/extjsblog/7338

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.