ExtJS MVC Snippets

Controller.js

Ext.define('App.controller.exampleController', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            '#someButton': {
                click: this.buttonAction
            }
        });
    },
    buttonAction: function (btn) {
        //do stuff
    }
});

Form.js

Ext.define('App.view.exampleForm', {
    extend: 'Ext.form.Panel',
    xtype: 'exampleForm',
    defaults: {
        padding:'10 10 10'
    },
    items: [{
        xtype: 'textfield',
        itemId:'parameter',
        fieldLabel: 'Parameter',
        allowBlank: false
    }],
    buttons: [{
        text: 'search',
        itemId:'searchBtn'
    }]
});

Grid.js

Ext.define('App.view.exampleGrid', {
	extend: 'Ext.grid.Panel',
	requires: [],
	controllers: ['Main'],
	store: 'exampleStore',
	xtype: 'exampleGrid',
	viewConfig: {
		enableTextSelection: true,
	},
	features: [
	],
	plugins: [
		//THIS IS A STANDARD SETTING WHICH ALLOWS FOR FASTER DATA IN GRIDS
		'bufferedrenderer',
	],
	tbar: {
		items: [
			'->',
		]
	},
	columns:{
		defaults:{
		},
		items: [
			{ header:  "field", dataIndex:  "field", hidden:true }
		]
	}
});

Model.js

Ext.define('App.model.exampleModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'field', type: 'auto' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'url',
        extraParams: {
            'param': 'value'
        },
        headers: { 'Content-type': 'text/json;  charset=utf-8', 'Accepts': 'text/json' },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

Store.js

Ext.define('App.store.exampleStore', {
	extend: 'Ext.data.Store',
	model: 'App.model.exampleModel',
	autoLoad: false
});

Inlcudes Store, Model, Grid, & Controller Mock-Ups