Here's a video on synchronizing store selection across multiple views of the same type, and of different types
Here's the source code.
ExtJS Tutorials
Learn tips, tricks, and best practices for Ext-JS
Wednesday, July 31, 2013
Monday, July 1, 2013
Animating windows in ExtJS
The following code will override the Window class, causing animation on show, close, maximize, and restore.
You need to set {maximizable:true}
in your Window config to get the maximize button.
Ext.window.Window.override({ animateTarget: Ext.getDoc(), //animate on show/close from top left of document maximize: function(){ this.callParent([true]); //animate }, restore: function(){ this.callParent([true]); //animate } });
Friday, June 14, 2013
Prompt user before leaving page if a form is dirty
Ext.application({ init: function(){ Ext.EventManager.addListener(window, 'beforeunload', this.onBeforeUnload, this, { normalized:false //we need this for firefox }); }, onBeforeUnload: function(e){ var showMessage = false; var MESSAGE = 'You have unsaved changes.'; Ext.Array.each(Ext.ComponentQuery.query('form'), function (form) { if (form.isDirty()) { showMessage = true; return false; //exit the loop } }); /* optionally notify the server when a user has unloaded the app: Ext.Ajax.request({ url: 'log.php', method:'POST', async: false //don't change }); */ if (showMessage === true) { if (e) e.returnValue = MESSAGE; if (window.event) window.event.returnValue = MESSAGE; return MESSAGE; } });
You will probably also want to turn on trackResetOnLoad for your forms as well:
Ext.form.Basic.override({ trackResetOnLoad:true }); Ext.form.Panel.override({ trackResetOnLoad:true });
Thursday, February 21, 2013
Enable CORS in a Spring MVC REST API for ExtJS
Let's say you want to run your ExtJS application on example.com, but run your REST API at example-api.com . Normally, you cannot do this without resorting to JSONP (GETs only), or a server proxy, due to security restrictions. However, it can be done safely using CORS, which modern browsers support.
I've been using Java Spring Roo for creating my REST API. Unfortunately, it does not support CORS out of the box. Here's how to set it up.
In your maven pom.xml file, inside dependencies, add:
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>1.3.2</version>
</dependency>
Open src/main/webapp/WEB-INF/web.xml and add:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Content-Type, X-Requested-With, Origin, Accept</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Your ExtJS REST proxy should now work!
I've been using Java Spring Roo for creating my REST API. Unfortunately, it does not support CORS out of the box. Here's how to set it up.
In your maven pom.xml file, inside dependencies, add:
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>1.3.2</version>
</dependency>
Open src/main/webapp/WEB-INF/web.xml and add:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Content-Type, X-Requested-With, Origin, Accept</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Your ExtJS REST proxy should now work!
Sunday, August 12, 2012
How to change the default presence validation message
The default model "presence" validation message is "must be present", which is kinda ugly.
Here's how to change it to something better:
Here's how to change it to something better:
// set this near the beginning of your program: Ext.data.validations.presenceMessage = "Required";
Saturday, August 11, 2012
Using ExtJS and JQuery on the same page
This widget shows an ExtJS Panel and Image component, along with the JQuery DeepLiquid JCrop widget, which allows you to select a crop area on an image.
Try it out by dragging your mouse over the image. You can also move the "crop" around.
Subscribe to:
Posts (Atom)