Grid with a busy Toolbar

Example shows using loadRawData(data) with JSON store and field mappings. Plus a very busiy toolbar.

by Jaikrat Tariyal

HTML

<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />

<div id="center_div">
</div>

JavaScript

//read Data Package guide http://docs.sencha.com/ext-js/4-0/#!/guide/data

Ext.define("User", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name", mapping:'name.name'},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

var data = [
        {'id': 1, name: {name:"John"}, description: "Fapfapfap"},    
        {id: 2, name: {name:"Danny"}, description: "Boobooboo"},
        {id: 3, name: {name: "Tom"}, description: "Tralala"},
        {id: 4, name: {name:"John"}, description: "Ololo"}    
    ];

// store with data
var oStore =  Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json'
        }
    }
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
		id:'USER_GRID',
    columns: [
        {dataIndex: "id", header:"ID"},
        { dataIndex: "name", header: "Name",editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 1, editor: "htmleditor"}
    ],
    plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
    store: oStore,
    renderTo: 'center_div',
    listeners: {
        render:function(){
            this.store.loadRawData(data);
           
        }
    },
    tbar : [{
          		xtype : 'textfield',
              id:'test',
              labelWidth: 30,
              width: 100,
        		  fieldLabel : 'From ',
              listeners: {
								afterrender: function(field){
                   var store = Ext.getCmp('USER_GRID').getStore();
                  store.each(function(record,idx){
                    console.log(record.get('descr')); 
                  });
                  Ext.getCmp('test').setValue();
                }
						  }
         },'~',{
            	xtype : 'datefield',
            	name : 'order_to',
            	fieldLabel : "To ",
              labelWidth: 30,
              width: 200,
           		value : new Date()
        ...