// Define the Grid data and create the Grid var myData = [ ['Wellness Spa','Active',12,0.03,'9/1 12:00am'], ['Atlas Rehab','Active',10,1.47,'9/1 12:00am'], ['Altria Group Inc','Active',28,0.34,'9/1 12:00am'], ['KIMA Security Inc','Active',61,0.02,'9/1 12:00am'], ['American International Group, Inc.','Non Active',31,0.49,'9/1 12:00am'], ['Yellow Cup Cafe','Active',-0.48,-1.54,'9/1 12:00am'], ['Markham Flying School','Active',0.53,0.71,'9/1 12:00am'], ['Brampton Urgent Care','Non Active',0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.','Active',0.02,0.04,'9/1 12:00am'], ['Richard Silver','Active',0.51,1.28,'9/1 12:00am'], ['Clinic Indeed','Active','Active',-0.64,'9/1 12:00am'], ['Genesis Massage Clinic','Active',-0.08,-0.23,'9/1 12:00am'], ['Crown Real Estate','Active',1.09,3.74,'9/1 12:00am'], ['All Nations Auto School','Active',-0.03,-0.08,'9/1 12:00am'], ['Gartwell Intl Inc','Active',0.05,0.13,'9/1 12:00am'], ['Shir Beauty Salon','Active',0.31,1.58,'9/1 12:00am'], ['Kent Auto','Active',0.44,0.54,'9/1 12:00am'], ['Johnson Low','Active',0.06,0.09,'9/1 12:00am'], ['JP Neck','Active',0.07,0.15,'9/1 12:00am'], ['McFarland Financial','Active',0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.','Active',0.41,1.01,'9/1 12:00am'], ['Caesar Spa','Active',0.14,0.54,'9/1 12:00am'], ['Acupuncture Clinic','Active',0.4,1.45,'9/1 12:00am'], ['Spring Day Spa','Non Active',0.26,0.58,'9/1 12:00am'], ['Huron Medical Centre','Active',0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company','Active',0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation','Active',0.55,0.88,'9/1 12:00am'], ['Marisha Rubin - Real Estate','Active',0.39,1.11,'9/1 12:00am'], ['Julia Kinn Real Estate Team, Inc.','Active',0.73,1.63,'9/1 12:00am'] ]; var ds = new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'status', type: 'string'}, {name: 'users', type: 'int'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ]) }); ds.loadData(myData); // example of custom renderer function function italic(value){ return '' + value + ''; } // example of custom renderer function function change(val){ if(val > 0){ return '' + val + ''; }else if(val < 0){ return '' + val + ''; } return val; } // example of custom renderer function function pctChange(val){ if(val > 0){ return '' + val + '%'; }else if(val < 0){ return '' + val + '%'; } return val; } // the DefaultColumnModel expects this blob to define columns. It can be extended to provide // custom or reusable ColumnModels var colModel = new Ext.grid.ColumnModel([ {id:'company',header: "Tenant", width: 160, sortable: true, locked:false, dataIndex: 'company'}, {header: "Status", width: 75, sortable: true, dataIndex: 'status'}, {header: "Users", width: 75, sortable: true, dataIndex: 'users',hidden: true}, {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange',hidden: true}, {header: "Created", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange',hidden: true} ]); //bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'}); /* * Here is where we create the Form */ var gridForm = new Ext.FormPanel({ id: 'company-form', //renderTo: Ext.getCmp('admin-profile').body , //frame: false, //title: 'Company Data', // style: 'margin: 5px;', layout: 'border', border : false, items: [{ //title: 'Center Region', region: 'center', // center region is required, no width/height specified //xtype: 'container', margins: '5 0 5 6', iconCls: 'silk-grid', layout: 'fit', border : false, items: { xtype: 'grid', ds: ds, cm: colModel, sm: new Ext.grid.RowSelectionModel({ singleSelect: true, listeners: { rowselect: function(sm, row, rec) { Ext.getCmp("company-form").getForm().loadRecord(rec); } } }), autoExpandColumn: 'company', //height: 500, //title:'Company Data', border: true, listeners: { render: function(g) { g.getSelectionModel().selectRow(0); }, delay: 10 // Allow rows to be rendered. }, tbar: [ 'Search: ', ' ', new Ext.ux.form.SearchField({ store: ds, width:200 }), '->',' ', { text:'Edit', iconCls:'silk-page-edit' },'->',' ', { text:'Add New', iconCls:'silk-add' }, '->',' ', { text:'Delete', iconCls:'silk-delete' } ], bbar: new Ext.PagingToolbar({ store: ds, pageSize: 20, displayInfo: true, displayMsg: 'Displaying 1 - 30 of 44', emptyMsg: "No topics to display" }) } },{ // xtype: 'panel' implied by default region:'east', margins: '5 5 5 0', width: 390, minSize: 390, split: true, cmargins: '5 5 5 0', // adjust top margin when collapsed layout: 'fit', //style: { "overflow":"hidden"}, autoScroll:true, frame: true, title:'Tenant details', items:[{ xtype: 'fieldset', labelWidth: 140, //title:'Company details', defaults: {width: 180}, // Default config options for child items defaultType: 'textfield', autoHeight: true, bodyStyle: Ext.isIE ? 'padding:5px 0 5px 5px;' : 'padding:10px 5px;', border: false, /*style: { "margin-left": "10px", // when you add custom margin in IE 6... "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else },*/ items: [{ fieldLabel: 'Tenant Name', name: 'company' }, new Ext.form.ComboBox({ fieldLabel: 'Type of the Tenant', store: [ ['CO', 'company', 'ToolTip'], ['OR', 'organization', 'ToolTip'], ['PE', 'person', 'ToolTip'] ], //direct array data typeAhead: true, triggerAction: 'all', emptyText:'Select a Type...', selectOnFocus:true }),{ fieldLabel: 'Company Name/Organization Name/Person\'s Name', name: 'pctChange' }, new Ext.form.TextArea({ fieldLabel: 'Description', wrap:'off' }),new Ext.form.ComboBox({ fieldLabel: 'Country', store: Ext.exampledata.states, //direct array data typeAhead: true, triggerAction: 'all', emptyText:'Select a country...', selectOnFocus:true }),new Ext.form.ComboBox({ fieldLabel: 'Province/State', store: Ext.exampledata.states, //direct array data typeAhead: true, triggerAction: 'all', emptyText:'Select a state...', selectOnFocus:true }),{ fieldLabel: 'City', name: 'price' },{ fieldLabel: 'Address ', name: 'price' },{ fieldLabel: 'Postal Code/ZIP Code', name: 'price' },{ fieldLabel: 'Phone #1', name: 'price' },{ fieldLabel: 'Web-site', name: 'price' },{ fieldLabel: 'Time zone', name: 'price' },new Ext.form.ComboBox({ fieldLabel: 'Type of the Tenant', store: [ ['AC', 'Active', 'ToolTip'], ['IA', 'Inactive', 'ToolTip'] ], //direct array data typeAhead: true, triggerAction: 'all', emptyText:'Select a status...', selectOnFocus:true }),{ fieldLabel: 'Contact First Name', name: 'price' },{ fieldLabel: 'Contact Last Name', name: 'price' },{ fieldLabel: 'Contact e-mail address ', name: 'price' },{ fieldLabel: 'Contacts Phone Number', name: 'price' }], buttons: [{ text: 'Save' },{ text: 'Cancel' }] }] }] });