/**
 *
 */

Ext.ns('AppMain', 'App.grids');

App.grids.ProductInventory = Ext.extend(Ext.grid.GridPanel, {
	border: false,
initComponent : function() {
        Ext.apply(this,{
                store: new Ext.data.SimpleStore({
                        fields: [
                                'productSku',
                                'price',
                                {name: 'expires', type: 'date', dateFormat: 'm-d-Y'}
                        ],
                        data: [
                                ['A0015', 101.25, '09-01-2007'],
                                ['C0084', 29.01, '09-02-2007'],
                                ['H0016', 83.81, '09-05-2007']
                        ]
                }),
                columns: [{
                        dataIndex: 'productSku',
                        header: 'Product SKU'
                },{
                        dataIndex: 'price',
                        header: 'Price',
                        renderer: Ext.util.Format.usMoney
                },{
                        dataIndex: 'expires',
                        header: 'Expires',
                        renderer: Ext.util.Format.dateRenderer('m/d/Y')
                }]
        });
		App.grids.ProductInventory.superclass.initComponent.call(this);
	}
});

Ext.reg('productinventory', App.grids.ProductInventory);

AppMain = function(){
	return {
		init: function(){
			new Ext.Viewport({
				layout: 'border',
				items:[{
					region: 'west',
					title: 'Categories',
					width: 200,
					split: true,
					collapsible: true
				},{
					xtype: 'tabpanel',
					region: 'center',
					title: 'content',
					activeTab: 0,
					items: [{
						xtype: 'productinventory',
						title: 'Product Inventory'
					},{
						title: 'New Product'
					}]
				},{
					reagion: 'south',
					title: 'South',
					height: 100,
					split: true,
					collapsible: true
				}]
			});
		}
	};
}();