• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

[SOLVED] Not seeing the solution to loading/reloading a grid in a panel

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    [SOLVED] Not seeing the solution to loading/reloading a grid in a panel

    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>
    Tags: extjs 3.4, grid, load, panel, reload
  • #2
    You could add a beforeshow listener to your window. Use your handle to the grid, gridNew, to call gridNew.getStore().load();

    You can pass load a params object with your parameters or you can use beforeload on the store to add params before loading. There are examples like this in all the examples that use a search box on the grid.

    Comment

    • #3
      Thanks for your response.

      I added the load method and it still does not work.

      I added gridNew.getStore().load(); to the window beforeload listener as follows:

      Code:
          var windowInvoice = new Ext.Window({
        layout: 'border',
        closeAction: 'hide',
        width: 610,
        height: 600,
        title: 'Invoice Window',
        items: [panelInvoiceNorth,panelInvoiceCenter],
        listeners: {
            beforeshow: function () {
                alert('grid will reload');
                gridNew.getStore().load();
            }
        }
    });
      I used an alert box to see the if the grid reloaded. When I double click on the first grid, I see the alert box. But no window comes up. Since I am using Chrome, I pulled up the developer tools. The console is saying:

      "Uncaught reference. gridNew is not defined".

      Another thing I did was add an alert window to the data store.

      Code:
              listeners: {
            beforeload: function() {
                alert('ds store called');
                this.baseParams = {
                    pgm: 'RLKVTSREG4',
                    action: 'getInvoice',
                    invoice: invoiceNumber,
                    limit: 25,
                    start: 0
                };
            }
        }
      I will see the "ds store called" message immediately when I start the app. But i don't see it when I double click on the first grid. Also, the back-end program RLKVTSREG4 has not yet been called (the # of times used is 0).
      Last edited by rkanemeier; 03-29-2012, 10:58 AM.

      Comment

      • #4
        I actually already received some help on this, but got caught up in a project I'm working on and forgot to post the solution (Eric helped me on this one).

        The general idea behind this app is to display a grouping grid that shows all of the sales tax register records generated by our sales tax software. When you double click a row, a window pops up and shows the invoice information: a form panel showing header information at the top of the window, and a grid panel showing invoice line information on bottom. I was having problems with getting the grid panel and the form panel to show the invoice detail and header. If you look at my code above, you can see I was trying to load the grid from the window listener. I'm not sure if this was the incorrect place to put this, but the solution was to move the gridNew.getStore().load() to the listener inside the 1st grid (the one that shows the tax register information). In my case, the starting grid was inside a viewport:

        Code:
         	new Ext.Viewport({
		layout: 'fit',																								
		items: [{
			xtype: 'grid',
			id: 'grid01',																							
			store: dsGrid01,
			stripeRows: true,																							
			columnLines: true,
    		listeners:{
    		    rowdblclick: function(grid, rowIndex, columnIndex, e) {
  	              currentRecordInvoice = grid.getStore().getAt(rowIndex);
                      invoiceNumber = currentRecordInvoice.get('RINV');
                      companyNumber = currentRecordInvoice.get('COMPY');
                      windowInvoice.show();
                      getInvoice();
                      grid02.getStore().load();
    		    }
			},

        Comment

        Previous template Next
        Working...
        X