< neil is coding />

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 =...