main.js

extjs sample with spring

Ext.namespace('Demo');

Ext.onReady( function() {

    Ext.QuickTips.init();

    Ext.get('current-date').boxWrap();

     Demo.store = new Ext.data.JsonStore({
    	url: '/countries.json',
    	root: 'rows',
    	totalProperty: 'count',
        fields: [{name: 'code', mapping: 'code', type: 'string'},
            {name: 'name', mapping: 'name', type: 'string'},
            {name: 'continent', mapping: 'continent', type: 'string'},
            {name: 'population', mapping: 'population', type: 'int'},
            {name: 'gnp', mapping: 'gnp', type: 'float'}
        ],
    	sortInfo:{field: 'code', direction: "ASC"},
         remoteSort: true
    });

    Demo.grid = new Ext.grid.GridPanel({
        
        store: Demo.store,
        columns: [
        	{header: "Code", width: 50, dataIndex: 'code', sortable: true},
            {header: 'Name', widht: 100, dataIndex: 'name', sortable: true, renderer: Demo.nameRenderer},
            {header: "Population", width: 100, dataIndex: 'population', sortable: true, align: 'right', renderer: Demo.intFormat},
            {header: "GNP", width: 100, dataIndex: 'gnp', sortable: true, align: 'right', renderer: 'usMoney'}
        ],
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		viewConfig: {
			forceFit: true
        },
        height:400,
        width: 500,
        frame: true,
		title: 'Countries of the World',
		loadMask: true,
		renderTo: 'content',
	    tools: [{id: 'refresh', qtip: 'Refresh list', handler: function(){Demo.store.reload();}}]
    });

    Demo.store.load();

});

Demo.nameRenderer = function(v,meta,record) {
    return '<span ext:qtip="' + record.data.continent + '">' + v + '</span>';
};

// format an int with commas
Demo.intFormat = function(v) {

    v = String(v);
    var r = /(\d+)(\d{3})/;
    while (r.test(v)) {
        v = v.replace(r, '$1' + ',' + '$2');
    }
    
    return v;
} ;