< neil is coding />

Stop losing you breakpoints when debugging Extjs 4 even when using dynamic loading with this code snippet; Ext.Loader.setConfig({ enabled : true //enable the dynamic dependency loading feature ,disableCaching : false //Comment this line out when you need to reload your Extjs js files });

Here's something I've written that will work if you have 1 level of folders which each have a level of nodes under each of them that have matching ids. It takes the JSON before loading it into the store and then adds the parent id to the node id. The new read function isn't recursive and as far as I have used/tested only works for JSON, like above, that has the level as folders and the second level as nodes. Feel free to make your own recursive version should you need to. I used the code almost verbatim from 'Ext.data.JsonReader' (so I could step through the process easily) and then added in the method read from 'Ext.data.reader.Reader' and altered the read method. Edit: This might be a bit hacky, and may stop some functions working. The Ux: // JavaScript Document Ext.define('Ext.ux.data.reader.DupeIdTreeReader', { extend: 'Ext.data.reader.Reader', alternateClassName: 'Ext.data.DupeIdTreeReader', alias : 'read...

Ext.onReady(function(){ Ext.define('Employee', { extend: 'Ext.util.Observable', constructor: function(config){ this.name = config.name; this.addEvents({ "sayHello" : true, "sayGoodbye" : true }); // Copy configured listeners into *this* object so // that the base class's constructor will add them. this.listeners = config.listeners; // Call our superclass constructor to complete // construction process. this.callParent(arguments) } }); var newEmployee = new Employee({ name: "Neil", listeners: { sayHello: function() { // By default, "this" will be the object that // fired the event. console.log(this.name + " says Hello!"); }, sayGoodbye: func...

Cod Snippet for Dynamically Adding Columns to a grid panel in Extjs4 Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { i...

Trying to get MVC to work and you're getting "Failed loading 'app/view/Viewport.js', please verify that the file exists" as an error? The solution: add the following line to your Ext.application config; autoCreateViewport: false, its that simple! So now a basic config for an Ext.application should look like; Ext.application({ name: 'AM', autoCreateViewport: false, appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } }); For more information on the MVC in Extjs4 look no further than the official guide http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

Code snippet to dynamically add form elements in Extjs 4 with ease. Ext.onReady(function() {     var myForm = Ext.create('Ext.form.Panel', {         title: 'Query form',         width: 600,         renderTo: Ext.getBody(),         items: [{             xtype: 'button',             text: 'click me to add',             handler: function() {                 var tf = Ext.create('Ext.form.field.Text', {                     name: 'name',           ...

I have a working grid that is recieving data as json, where the json is matching the model. However in the real world, things aren't always this clean and controlled. We may end up with fields missing or entries with the wrong field name, or even extra fields that don't exist in the model. So if we want the process halted if the json does not match the model how can catch it? I extended the Extjs reader class, and then implemented to over-ridden methods from the original class, and sent errors to the console and replaced missing fields with a message. Ext.define('App.Reader', { extend: 'Ext.data.reader.Json', extractData: function(root) { var me = this, values = [], records = [], Model = me.model, i = 0, length = root.length, idProp = me.getIdProperty(), node, id, record; if (!root.length && Ext.isObject(root)) { root =...

I was moving some code from raphael.js into ExtJs4 beta 1, and I found this very useful; //in rapheal paper.clear(); //in Extjs4 paper.surface.removeAll(); (Here paper is an instance of a draw component)