Sencha Inc. | HTML5 Apps

Blog

Ext Designer 1.1 Released

March 17, 2011 | Jarred Nicholls

Ext Designer 1.1 Released We’re pleased to announce the next version of Ext Designer, version 1.1, is released and available to download. Ext Designer 1.1 brings several key features to promote the reusability of components created within Ext Designer and brings additional stability and performance improvements.

To date, you’ve been able to reuse a component in a project by means of the Promote to Class and Linked Instance features. But these components are still within the confines of a single project. What if you wanted to reuse a component across multiple projects? Up until now, there has been no way to transfer components between projects. Ext Designer 1.1 changes this today.

Save to Toolbox

Save to Toolbox in Ext Designer 1.1Save to Toolbox is a new feature allowing you to save your project’s components directly to the component Toolbox for later use. This new feature enables you to save and reuse components across multiple projects with extreme ease.

To get started, right-click on any of your top-level components in the Component Tree and select “Save to Toolbox” (you may notice another new feature here, but we’ll visit that shortly). A “Save to Toolbox” dialog will appear allowing you to give a custom Name to your component, as well as the ability to store the component in any of the available Categories in the Toolbox. Or, simply type your own Category name to create a grouping of your own. When your component is saved to the Toolbox, it will appear with your specified Name, within the specified Category, and represented by a nice noticeable green component icon.

naming custom components in Ext Designer 1.1

Save to Toolbox stores a snapshot of your component, along with any associated Linked Instances or Stores. What this means is that any changes that you make to the original component in your project will not propagate to your Toolbox copy. This keeps your Toolbox copy pristine, and could also be used as a way to version your components.

What if you want to update a Toolbox snapshot? No problem! If you use the same Name as your snapshot in the Save to Toolbox dialog, you will be given an opportunity to overwrite the snapshot; and even save to a new Category if you wish. Right-clicking on a Toolbox component will present some additional actions, such as Delete to remove your Toolbox component, and Rename to give it a new name.

Component Import & Export

Save to Toolbox provides a great way to reuse components across projects. But, what about taking those components out of the Designer altogether and sharing them across computers and users? Well, now you can do that too! And yes, it’s just as easy as saving to the Toolbox.

Having your components in file format gives a lot of freedom to organize and reuse your components. Do you want to share your components with other members of your development team to use in their own projects? Do you want to do source control versioning on particular components? Now, you can.

import from file dialog in Ext Designer 1.1Once again, you will right-click on any of your top-level components in the Component Tree, and this time select “Export to File”. A file save dialog will appear, allowing you to choose a file name and location to save your component. The default file extension for Ext Designer components is “.xdc”. When you commit the save, you will be notified in the bottom Status Bar that your component exported successfully.

OK, excellent. So now how do you re-import these components? You can right-click anywhere in the Toolbox and choose “Import from File”, or you can simply click the nice large “+” button at the bottom of the Toolbox: open your component file, give your component a Name and a Category, and you’re done. Your component is now in your Toolbox and available for use, just as if you did a “Save to Toolbox”.

Conclusion

Ext Designer 1.1 takes you to the next level by allowing full use and flexibility of the components you create in the application; across your projects, across your machines, and across your team. We’re confident the improved stability and the new component-oriented features will prove to be a tremendous asset in the daily use of the application.

For a full list of updates including bug fixes, check out the changelog. Otherwise, go download Ext Designer 1.1!

There are 19 responses. Add yours.

Martin

3 years ago

Awesome work, this makes designer much more useful now!

Bostjan Rihter

3 years ago

Guys, are there any plans on making ExtDesigner compatible with ExtJS4 as it becomes available?

Mats

3 years ago

Nice work Jarred, any ideas on when we can expect to be able to import 3rd party extensions (or is that possible now using the Import feature?).

Jarred Nicholls Sencha Employee

3 years ago

@Bostjan Ext JS 4 support is underway.  There will be a short gap between Ext JS 4 RTM and Designer 1.2 RTM (1.2 will have Ext JS 4 support).  So yes, there are definitely plans grin

@Mats 3rd-party UXs are not supported by the component import feature, only components that originated in the Designer.  UX support is on the roadmap, and I look forward to sharing those details in the near future.

Bostjan Rihter

3 years ago

Thanks Jarred, great news!

Bob Obringer

3 years ago

@Bostjan:  Found this in the forums (but I can’t locate it again, so kudos to the author… but I’m pasting here).  I create placeholder components in my designer (form fields should use a text field placeholder, containers should use container placeholders).  You can fully configure the options that are available right in designer and then use this code to replace the placeholder with your custom component.  Has worked like charm for me so far…

/**
* Replaces a component with another, preserving the original config
* @param {Component} newComponent the new component to replace this one with
* @return {Component} this the replaced component
*/
Ext.override(Ext.Component, {
  replaceWith : function(newComponent){
      var ctnr = this.ownerCt;
      // if the refOwner is a form or if newComponent.ownerForm config is set to the form
      var form = newComponent.ownerForm ? newComponent.ownerForm : this.refOwner.form;
      var i = ctnr.items.indexOf(this);
      // apply initialConfig
      Ext.applyIf(newComponent, this.initialConfig);
      ctnr.remove(this, true);
      var added = ctnr.insert(i, newComponent);
      // if the component is in a form
      if (form){
        // remove the old component from the form
        form.remove(this);
        // add the new component to the form
        form.add(added);
      }
  } 
});

Bob Obringer

3 years ago

Oops… meant @Mats, not @Bostjian

Les

3 years ago

Basic question: Why the Designer needs to be downloaded?  I thought I should be able to access it as any other Web application by following a URL.

Naveed

3 years ago

I am running in eval mode. The export feature and “save to toolbox” is not working in the eval, is this by design or else….

Jarred Nicholls Sencha Employee

3 years ago

@Naveed In certain cases the save function was breaking, which has been resolved in a 1.1.1 build that is available now.

Elgs

3 years ago

Fingers crossed to th ux support. Or at least other more elegant way to use a 3rd party extension in the code.

Simon Wong

3 years ago

Any pre-sale for ExtJS 4 and Designer?

Chris

3 years ago

I posted something yesterday with links to the forum about localization. After submitting the post, it reported that it may be spam, probably due to the links. Could you approve the post and put it here? You may delete this message after it’s done.

Chris

3 years ago

Kudos for the UTF-8 encoding and preservation of international Unicode characters!

Chris

3 years ago

Thanks for the hard work on the new release. I’m glad to see a new release available for download. I’m a little disappointed about the fact that there’s no support yet for using variables in fieldLabel, headers, html, etc. Very useful for localisation. Remember these forum posts?
/forum/showthread.php?114644-xds-and-multilanguage-app
/forum/showthread.php?97366-Localization
/forum/showthread.php?101424-DISCUSS-Set-text-string-from-a-variable
(I can’t post full links)

Jonas

3 years ago

25

Jonas

3 years ago

Tool for creation of interfaces in Ext JS and Designer too.

Jonas

3 years ago

in forum of Sencha General Open Discussion.

nicotine

3 years ago

It’s a great features, but I have a question.
Is it possible to reuse the component event handlers I made between child components?
Ex: a slider and a textField communicate via events to get and setValue each other. They are child of a container mySlider.ui.js . ( event implementation in mySlider.js )
If I save the container in ToolBox, can I retrieve the behavior between child components?
Excuse my english !!
Thanks

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

Commenting is not available in this channel entry.