tag:blogger.com,1999:blog-8780177156030708912025-09-23T14:20:59.943-07:00ExtJS TutorialsLearn tips, tricks, and best practices for Ext-JSNeil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.comBlogger45125tag:blogger.com,1999:blog-878017715603070891.post-21732971401772879232013-07-31T13:52:00.001-07:002013-07-31T13:52:08.055-07:00Store Selection Across Multiple ViewsHere's a video on synchronizing store selection across multiple views of the same type, and of different types
Here's the source code.Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-53072117211017744222013-07-01T03:09:00.001-07:002013-07-01T12:54:16.058-07:00Animating windows in ExtJSThe 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: Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com3tag:blogger.com,1999:blog-878017715603070891.post-76114247564572945462013-06-14T22:47:00.000-07:002013-07-01T03:05:24.501-07:00Prompt user before leaving page if a form is dirtyExt.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 (Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-1577139838316317362013-02-21T14:14:00.001-08:002013-03-24T19:18:25.662-07:00Enable CORS in a Spring MVC REST API for ExtJSLet'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 Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-10868077339709164402012-08-12T16:39:00.002-07:002012-08-12T16:39:35.089-07:00How to change the LoadMask text and targetNeil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-31112001808171172862012-08-12T16:23:00.002-07:002012-08-12T16:24:15.673-07:00How to change the default presence validation messageThe default model "presence" validation message is "must be present", which is kinda ugly.
Here's how to change it to something better:
// set this near the beginning of your program:
Ext.data.validations.presenceMessage = "Required";
Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com2tag:blogger.com,1999:blog-878017715603070891.post-168034150450051402012-08-11T14:36:00.001-07:002012-08-11T14:54:01.764-07:00Using ExtJS and JQuery on the same pageThis 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.
Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-12355038145662972812012-07-26T15:11:00.002-07:002012-07-26T15:12:26.078-07:00A function to concatenate field values in a storeBelow is a function to concatenate the values in a field in a store.
This is similar to Store.sum();
Ext.data.Store.override({
concat: function(field, grouped, separator){
if(typeof separator === 'undefined'){
separator = ', ';
}
if (grouped && this.isGrouped()) {
return this.aggregate(this.getConcat, this, true, [Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-62885175292250018102012-07-18T19:54:00.000-07:002012-08-08T23:46:02.506-07:00How to capture the HTMLEditor's onpaste eventThe key to capturing the onpaste event for the HTMLEditor component is to wait for its initialize event to fire and then add the onpaste handler to its document body:
{
xtype: 'htmleditor',
listeners: {
initialize: function(cmp) {
Ext.EventManager.addListener(
cmp.iframeEl.dom.contentWindow.document.body
, 'paste'
, function(e, elem){
console.log(Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-10035114278047906642012-07-16T14:26:00.001-07:002012-08-08T23:47:33.760-07:00How to simulate AJAX requests in JSFiddle
set the URL as /echo/json/ [you need that last slash]
if you are doing a read action (such as in Model.load) you need to set the proxy.actionMethods.read to "POST"
set "json" as an extraParam and pass the json string that you want echoed back
you can optionally set a delay in extraParams
Here is a little function to help you simulate an AJAX request for a proxy:
function sim(proxy, Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-1782358779916364792012-07-15T21:41:00.002-07:002012-07-15T21:41:44.156-07:00This blog, in FrenchThe smart guys at Developpez.com (a very popular French dev portal) asked to translate and post some of my blog articles on their site. Here it is:
http://neilmcguigan.developpez.com/
Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-30256304753022899212012-07-05T16:38:00.002-07:002012-07-05T16:38:40.586-07:00ExtJS Trouble-shootingUncaught Error: The following classes are not declared even if their files have been loaded: 'My.folder.File'. Please check the source code of their corresponding files for possible typos: 'app/folder/File.js ext-all-dev.js:9655
Ext.apply.onFileLoaded ext-all-dev.js:9655
(anonymous function) ext-all-dev.js:2953
Ext.apply.injectScriptElement.onLoadFn
This means that you required the file Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-28156601625232826262012-06-25T14:06:00.000-07:002012-06-25T14:10:21.928-07:00RowEditing Plugin: validateedit eventThe rowediting plugin fires a validateedit event after its Update button is clicked.
It is fired before the record is populated with the form data.
Here is how to handle the validateedit event if you want to validate a model and show its validation errors:
The editor.editor.form reference is to a BasicForm and not a Form Panel.
validateedit: function(editor, e, eOpts){
var newModel = Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com1tag:blogger.com,1999:blog-878017715603070891.post-30280165081958763612012-06-25T10:40:00.002-07:002012-06-25T10:41:24.801-07:00ExtJS Faster LoadingHere's how to make your app appear to load faster. It's a trick used in iOS programming:
1. take a screenshot of your application, in its initial but loaded state *
2. blur or mask this image somewhat
3. load this image first, and set it as the HTML background image
4. load ExtJS and your application
5. start your application
6. the app will start and show its interface, and the viewport will Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-31669398883992087602012-06-16T14:51:00.002-07:002012-07-01T13:16:00.064-07:00Polymorphic JSON: Changing the model type based on the responseI am using the Party Model, and needed to create an Individual or Organization model depending on the JSON response. Had to override Ext.data.reader.Reader to do it. Ideally, Sencha would fire a "creating model" event or hook that would let us pick the model at Read time. The system looks like this:
PARTY
id
name
getText() - returns name
ORGANIZATION : PARTY
doingBusinessAs
getText() - Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com2tag:blogger.com,1999:blog-878017715603070891.post-31911610980393154772012-05-25T12:20:00.002-07:002012-07-20T16:11:04.402-07:00Rules for HasOne and BelongsTo Associations in ExtJS
Put the proxy in the model, unless you have a very good reason not to [1]
Always use fully qualified model name
Always set the getterName
Always set the setterName
Always set the associationKey, if the foreign object is returned in the same response as this object
Always set the foreignKey, if you want to load the foreign object at will
Consider changing the instanceName to something shorter
TheNeil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com9tag:blogger.com,1999:blog-878017715603070891.post-53910289896611379552012-05-25T11:50:00.003-07:002013-05-16T11:48:54.842-07:00Rules for HasMany Associations in ExtJS
Always put your Proxies in your Models, not your Stores, unless you have a very good reason not to *
Always require your child models if using them in hasMany relationships. **
Always use foreignKey if you want to load the children at will
Always use associationKey if you return the children in the same response as the parent
You can use both foreignKey and associationKey if you like
Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com33tag:blogger.com,1999:blog-878017715603070891.post-45584312666083926282012-05-21T11:33:00.001-07:002012-05-21T11:33:08.136-07:00Javascript SOLID principlesThis guy seems to know what he's talking about:
http://aspiringcraftsman.com/series/solid-javascript/Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-38568745679818139472012-05-19T11:17:00.002-07:002012-05-19T11:19:53.225-07:00ExtJS History is backwardsExt JS's History navigation is backwards. I know why they did it that way (in the name of cross-browser compatibility), and most people, like balupton's history.js, get it wrong too.
In your app, you want to change the URL bar AFTER you navigate, not before.
Here's why:
Your app should work without browser history manipulation, so you need some sort of navigation system in the first placeNeil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-25615101620183887392012-05-15T14:10:00.003-07:002012-05-15T14:11:10.086-07:00Disabling Chrome's Translate Function in your ExtJS ApplicationTo disable Chrome's Google Translate function in your ExtJS app, add this to your <head>:
HTML 5:
<meta name="google" value="notranslate">Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-48294292814841743182012-04-25T20:04:00.000-07:002012-04-25T20:04:10.940-07:00Ext Replace HistoryYou can use Ext.History.add() to change the URL bar and add an item to the browser's history. For example, you could go from example.com#contacts to example.com#email
This doesn't reload the page, but you can listen for the change and load different forms in Ext, for example
Today, however, I needed to change the URL without adding an item to History, yet still fire the Ext.History.change Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-13346337897955023452012-04-17T13:51:00.000-07:002012-04-17T13:51:14.608-07:00Sencha Architect is outhttp://www.sencha.com/products/architect
If you bought Ext Designer this year, you get Architect for free.
Formerly Sencha Designer 2, and before that Ext Designer. Registering my version now and will post some videos soon.Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-39434891186116835532012-04-17T13:49:00.004-07:002012-04-17T13:49:45.439-07:00ExtJS 4.1 Docs are finally upLooks like 4.1 is ready for prime-time
http://docs.sencha.com/ext-js/4-1/Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com3tag:blogger.com,1999:blog-878017715603070891.post-81808907696014934652012-04-03T14:09:00.002-07:002012-04-03T14:09:55.649-07:00ExtJS 4.1 Release Candidate 2 is outhttp://www.sencha.com/blog/ext-js-4-1-rc-2-released/ Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0tag:blogger.com,1999:blog-878017715603070891.post-80101885300213576152012-04-03T11:50:00.001-07:002012-04-03T11:51:18.977-07:00Looks like Chrome 18 breaks Sencha ExtJSUsing Chrome 18, try clicking the reload button twice here:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/Line.html
Many of the buttons in my app started disappearing in Chrome 18 only...hopefully will be fixed in 19!Neil McGuiganhttp://www.blogger.com/profile/14122981831780837323noreply@blogger.com0