< neil is coding />

Open up a console window in Eclipse, right click the console background and you can edit it from there. You can also change this in the preferences under Run/Debug. Oh, and make sure you have a great day now that your eyes are working just perfectly now! :)

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

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:

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',                     fieldLabel: 'Name'                 });                 myForm.add(tf);             }         }]     }); });

 I've just seen this product today and although I don't require it straight away, I had to blog about it because I can see it being very useful in the future. I was first drawn to it for its support of Extjs, but here is a list of the support it offers; Templates are available for generating the following application architectures:     ASP.NET MVC framework + LinqToSql or EntityFramework     Castle Monorail MVC framework + ActiveRecord     Adobe Flex 3 + ASP.NET + Web service     Php + ExtJS application     Java + ExtJS application Database supported by LatticeFramework Code Generator:     SQL Server 7/2000/2005/2008     Oracle 9i/10g/11     MySQL 5/6     PostgreSQL 7/8 You can read more about it and download it here; http://www.latticesoft.com/product/overview.aspx I hope I'm not being cheeky but It would be good to see some support for grails and spring too! :)

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 =

Crtl + P sets it back in the IE window

Extjs4 drawComponent.surface.add() not working? try this instead; paper = Ext.create('Ext.draw.Component', {     width: 1000,     height: 900,     autoShow: true,     items: [     {         type: 'circle',         fill: '#ccc',         radius: 50,         x: 200,         y: 200     }],     renderTo: 'canvas' }); Ext.define('Test.Control.Event', {     extend: 'Ext.draw.Sprite',     constructor: function() {         this.callParent([{                 type: 'circle',                 fill: '#FCCEED',                 radius: 50,                 x: 100,                 y: 100,                 surface: paper.surface             }]);     } }); var s = paper.surface.add(new Test.Control.Event()); s.show(true);

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)

A simple example of how to draw a rectangle in ExtJs4 //init the draw component paper = Ext.create('Ext.draw.Component', { width: 1000, height: 900, renderTo: Ext.getBody() }); // Add a rectangle sprite var myRect = paper.surface.add({ type: 'rect', x: 100, y: 100, height : 600, width: 800, fill: '#ccc' }); //change the fill color myRect.setAttributes({ fill: '#cc5' }, true);

If you're using Extjs and grails togther you probably want to keep you JSON under the js directory. However in your application.js if you define regModel with a proxy and a url like; url : 'storetestusers.json' Your application.js won't find it in the js directory as its resolving the url relative to the gsp page, so will look in the same directory as the page. But if you change the url to; url : '../js/storetestusers.json' in a default grails project this will find the json file. nice and easy!

This is a simple snippet, but worthy of note! (1) Put this in the gsp <g:formatDate date="${theDate}" formatName="customDateFormat"/> (2) Put this in the grails-app\i18n\messages.properties customDateFormat=yyyy-MM-dd et voila!

I found the following on stack overflow very useful! If you're using Tortoise SVN, you should be able to revert changes from just that revision into your working copy (effectively performing a reverse-merge), then do another commit to re-add the file. Steps to follow are: Browse to folder in working copy where you deleted the file. Go to repo-browser. Browse to revision where you deleted the file. In the change list, find the file you deleted. Right click on the file and go to "Revert changes from this revision". This will restore the file to your working copy, keeping history. Commit the file to add it back into your repository. hints: you can find the Revision number from the change logs, another good reason to make good commit commments! I repeated the steps again for one file and it didn't have all the above options. But once in the repo browser I found you the actions 'copy' and 'copy to working...'  after which you will then need

I'll be using this blog to keep track of new stuff I'm learning with jquery, grails, javascript that I can't find easily documented. Also I'll be posting the css tricks I find and/or remember so I can keep them all in one place! Coming up soon: jquery validation plugin!