I tried finding an example of putting a grid inside of a panel but it seems that everyone has their own way of loading the grid's data. The example code below shows an initial grid of invoices. When you double click on a row, a pop-up window should come up that has 2 panels: north and center. The north panel (a form) shows the invoice header and the center panel (a grid) shows the invoice lines. I can get the panels, form and grid to display but cannot seem to find the method/function to call nor the place to put said method/function to load the grid. I understand that 3.1 enterprise edition comes with the Nitro App Builder that can handle this sort of thing "right out of the box". However, as an exercise in "how ExtJS works", I would like to see where I went wrong with this or what I'm missing. (please excuse the horrible code you are about to read)
Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Copyright" content="Copyright 2008-2011 CNX Corporation, All Rights Reserved"> <title>Valence - AutoCode - Grid Inquiry Template</title> <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="/vvresources/valence.css" /> <script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/extjs/ext-all.js"></script> <script type="text/javascript" src="/vvresources/valence.js"></script> <script type="text/javascript"> var invoiceNumber = ''; Ext.onReady(function(){ var currentRecordInvoice = new Ext.data.Record(); // data store for customers grid var dsGrid02 = new Ext.data.GroupingStore({ autoLoad: true, url: "vvcall.pgm", baseParams: { pgm: 'RLKVTSREG4', action: 'getInvoice', invoice: invoiceNumber, limit: 25, start: 0 }, remoteSort: false, sortInfo: { field:'HTICKLIN', direction: 'asc' }, groupField: 'HTICKLIN', reader: new Ext.data.JsonReader({ root: "autogrid02", totalProperty: "totallines", fields: [ {name:"HTICKLIN"}, {name:"HPARTNO"}, {name:"HPRTDESC"}, {name:"HLINETYPE"} ] }), listeners: { beforeload: function() { this.baseParams = { pgm: 'RLKVTSREG4', action: 'getInvoice', invoice: invoiceNumber, limit: 25, start: 0 }; } } }); var dsGrid01 = new Ext.data.GroupingStore({ autoLoad: true, url: "vvcall.pgm", remoteSort: true, sortInfo: { field: 'RINV', direction: 'asc' }, groupField: 'RINV', reader: new Ext.data.JsonReader({ root: "autogrid", totalProperty: "totalCount", fields: [ {name:"RINV"}, {name:"RTILN"}, {name:"RTDATE", type:'date', dateFormat:'Ymd'}, {name:"RTAXED"}, {name:"RCUST"}, {name:"RSTOR"}, {name:"RTGEO"}, {name:"RIGA"}, {name:"RTTAX"}, {name:"RCOMB"} ] }), listeners:{ beforeload: function(){ this.baseParams = { pgm: 'RLKVTSREG3', monthSearch: Ext.getCmp('searchMonth').getValue(), yearSearch: Ext.getCmp('searchYear').getValue(), storeSearch: Ext.getCmp('searchStore').getValue(), geoCodeSearch: Ext.getCmp('searchGeoCode').getValue(), action: 'getRecords', limit: 25, start: 0 }; } } }); var gridnew = new Ext.grid.GridPanel({ store: dsGrid02, autoHeight: true, cm: new Ext.grid.ColumnModel({ columns:[ {header: '<b>Line #</b>', width: 50, sortable: false, dataIndex: 'HTICKLIN'}, {header: '<b>Part#</b>', width: 75, sortable: false, dataIndex: 'HPARTNO'}, {header: '<b>Description</b>', width: 150, sortable: false, dataIndex: 'HPRTDESC'}, {header: '<b>Type</b>', width: 50, sortable: false, dataIndex: 'HLINETYPE'} ] }) }); var fieldSetInvoice = new Ext.form.FieldSet({ id: 'fieldSetInvoice', border: true, height: 210, width: 570, title: 'Invoice Details', iconCls: 'tag_blue', labelWidth: 110, items: [{ xtype: "fieldset", autoHeight: true, layout: "table", layoutConfig: { columns: 3 }, border: false, style: 'padding: 0; margin: 0;', items: [{ layout: "form", width: 180, items: [{ xtype: 'displayfield', id: 'invoiceNbr', fieldLabel: 'Invoice' }] },{ layout: "form", width: 180, items: [{ xtype: 'displayfield', id: 'lineNbr', fieldLabel: 'Line#' }] }] }] }); // form panel for editing a ticket var formInvoice = new Ext.FormPanel({ frame: true, border: false, header: false, labelAlign: 'top', labelWidth: 110, height: 220, width: 580, items: [ fieldSetInvoice ] }); // north panel definition to hold ticket form var panelInvoiceNorth = new Ext.Panel({ region: 'north', border: false, height: 225, width: 590, items: [formInvoice], tbar: [{ xtype: 'tbbutton', text: 'Cancel', tooltip: 'cancel', iconCls: 'cancel', handler: function() { windowInvoice.hide(); } }] }); // north panel definition to hold ticket form var panelInvoiceCenter = new Ext.Panel({ region: 'center', border: false, height: 225, width: 590, items: [gridnew] }); var windowInvoice = new Ext.Window({ layout: 'border', closeAction: 'hide', width: 610, height: 600, title: 'Invoice Window', items: [panelInvoiceNorth,panelInvoiceCenter] }); new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', id: 'grid01', store: dsGrid01, stripeRows: true, columnLines: true, listeners:{ rowdblclick: function(grid, rowIndex, columnIndex, e) { // console.log('in row double click'); currentRecordInvoice = grid.getStore().getAt(rowIndex); invoiceNumber = currentRecordInvoice.get('RINV'); // console.log(invoiceNumber); alertMsg = 'Invoice Number is: ' + invoiceNumber; // console.log(panelInvoiceNorth); // alert(alertMsg); // console.log(typeof panelInvoiceNorth.update); windowInvoice.show(); //panelInvoiceNorth.update('<div>' + invoiceNumber + ' </div>'); } }, view: new Ext.grid.GroupingView({ }), columns: [ {header: '<b>Invoice #</b>',width: 132,sortable: true,dataIndex: 'RINV'}, {header: '<b>Line #</b>',width: 50,sortable: false,dataIndex: 'RTILN'}, {header: '<b>Trans Date</b>',width: 88,sortable: false,dataIndex: 'RTDATE',renderer:Ext.util.Format.dateRenderer('m/d/Y')}, {header: '<b>Taxed Geo</b>',width: 99,sortable: false,dataIndex: 'RTAXED'}, {header: '<b>Customer #</b>',width: 120,sortable: false,dataIndex: 'RCUST'}, {header: '<b>Store</b>',width: 60,sortable: true,dataIndex: 'RSTOR'}, {header: '<b>Geo Loc</b>',width: 55,sortable: false,dataIndex: 'RTGEO'}, {header: '<b>Invoice Gross</b>',width: 100,sortable: false,align: 'right',dataIndex: 'RIGA',renderer: Ext.util.Format.usMoney}, {header: '<b>Total Tax</b>',width: 80,sortable: false,align: 'right',dataIndex: 'RTTAX',renderer: Ext.util.Format.usMoney}, {header: '<b>Comb Rate</b>',width: 85,sortable: false,align: 'right',dataIndex: 'RCOMB'} ], loadMask: true, tbar: [{ xtype: 'tbtext', text: 'Month:' },{ xtype: 'combo', id: 'searchMonth', store: new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [ [0, 'Prior Month'], [1, 'January'], [2, 'February'], [3, 'March'], [4, 'April'], [5, 'May'], [6, 'June'], [7, 'July'], [8, 'August'], [9, 'September'], [10, 'October'], [11, 'November'], [12, 'December'] ] }), valueField: 'value', displayField: 'text', value:'0', mode: 'local', editable: false, triggerAction: 'all', name: 'monthSearchName', fieldLabel: 'Month', selectOnFocus: true, width: 100, labelStyle: 'font-size: 10px;', labelSeparator: '', listeners: { select: function() { Ext.getCmp('grid01').getBottomToolbar().changePage(1); } } }, '-', { xtype: 'tbtext', text: 'Year:' },{ xtype: 'combo', id: 'searchYear', store: new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [ [2012, '2012'], [2011, '2011'], [2010, '2010'], [2009, '2009'], [2008, '2008'], [2007, '2007'] ] }), valueField: 'value', displayField: 'text', value:'2012', mode: 'local', editable: false, triggerAction: 'all', name: 'yearSearchName', fieldLabel: 'Month', selectOnFocus: true, width: 50, labelStyle: 'font-size: 10px;', labelSeparator: ' ', listeners: { select: function() { Ext.getCmp('grid01').getBottomToolbar().changePage(1); } } }, '-', { xtype: 'tbtext', text: 'Store:' },{ xtype: 'trigger', id: 'searchStore', triggerClass: 'x-form-clear-trigger', width: 75, onTriggerClick: function(){ this.setValue(''); Ext.getCmp('grid01').getBottomToolbar().changePage(1); } }, '-', { xtype: 'tbtext', text: 'Taxed GeoCode:' },{ xtype: 'trigger', id: 'searchGeoCode', triggerClass: 'x-form-clear-trigger', width: 100, onTriggerClick: function(){ this.setValue(''); Ext.getCmp('grid01').getBottomToolbar().changePage(1); } }], keys: [{ key: Ext.EventObject.ENTER, fn: function() { Ext.getCmp('grid01').getBottomToolbar().changePage(1); } }], bbar: new Ext.PagingToolbar({ pageSize: 25, store: dsGrid01, displayInfo: true, displayMsg: 'Showing records {0} - {1} of {2}', emptyMsg: "No records to display", plugins: [new Valence.plugin.PagingToolbarSlider()] }) }] }); }); </script> </head> <body> </body> </html>
Comment