Posts

Showing posts from September, 2011

Extjs4 treeStore with that can take JSON where folders have nodes with duplicate ids

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

Add Custom Events in Extjs 4 : A basic working Observable code snippet

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

Remove Grid Columns Dynamically in Extjs 4

Code snippet for removing columns in real time from an Extjs 4 grid. var myComp = myGrid.headerCt.getComponent(colIdForRemoval); myGrid.headerCt.remove(myComp); myGrid.getView().refresh(); When you create the columns in the grid you will need to specify an id: even when you are using a dataindex:

ExtJs4 : Dynamically Add Columns

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

Failed loading 'app/view/Viewport.js', please verify that the file exists

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