Tweet
I found an example supplied by Valence to pop up a window to show the details of a record in a grid. The example is the ticket manager app (where you click on a row in the grid and it opens up a window showing the ticket details). Is the way the example is coded to pop up the window the only "natural" way to open up a "pop up" window through Valence? It seems that the code is jumping through hoops to get the window to render.
-
-
I'm sure it's not the only way. If I recall correctly, the window is rendered off the screen and then moved into position. This is unnecessary as you could just show it when you need it and hide it sometimes.
Is that the type of hoop you were noticing? -
I think that's what I'm referring to. I say "think" because I couldn't have guessed it on my own.
In the code below, why won't invoiceNumber show up in my window:
I'm wanting to make sure that the window is displaying the contents of the invoice row selected from the grid. I see that the ticket manager example is actually putting data into a form within the window. I just wanted to "baby-step" through the different pieces needed to create the window and form.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(); 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: ["RINV","RTILN","RTDATE","RTAXED","RCUST","RSTOR","RTGEO","RIGA","RTTAX","RCOMB"] }), listeners:{ beforeload: function(){ this.baseParams = { pgm: 'RLKVTSREG2', search: Ext.getCmp('search').getValue(), storeSearch: Ext.getCmp('storeSearch').getValue(), action: 'getRecords', limit: 25, start: 0 }; } } }); // north panel definition to hold ticket form var panelInvoiceNorth = new Ext.Panel({ region: 'north', height: 250, border: false, html: '<div>text text' + invoiceNumber + ' text text text</div>', tbar: [{ xtype: 'tbbutton', text: 'Save', tooltip: 'save', iconCls: 'save' }, '-', { xtype: 'tbbutton', text: 'Cancel', tooltip: 'cancel', iconCls: 'cancel', handler: function() { windowTicket.hide(); } }] }); var windowInvoice = new Ext.Window({ closeAction: 'hide', width: 400, height: 200, title: 'Invoice Window', items: [panelInvoiceNorth] }); 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'); alertMsg = 'Invoice Number is: ' + invoiceNumber; alert(alertMsg); windowInvoice.show(); } }, 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'}, {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: 'Invoice:' },{ xtype: 'trigger', id: 'search', triggerClass: 'x-form-clear-trigger', onTriggerClick: function(){ this.setValue(''); Ext.getCmp('grid01').getBottomToolbar().changePage(1); } }, '-' , { xtype: 'tbtext', text: 'Store:' },{ xtype: 'trigger', id: 'storeSearch', triggerClass: 'x-form-clear-trigger', 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
-
If I'm reading correctly, it looks like at the time you are defining the HTML in the window, you are using a variable called invoiceNumber. At the time, it is undefined.
When you set invoiceNumber to the invoice number, the window still has the HTML string with the undefined value.
Try using this command to update the content (or HTML) or the panel in your window:
By updating the panel with the new HTML content after retreiving the invoiceNumber from the grid, you should see the results you desire.Code:panelInvoiceNorth.update('<div>text text' + invoiceNumber + ' text text text</div>');
In the new version of Valence (3.1) look out for an updated version of the MyTickets app.Comment
-
I'm not certain where that code would go. I put it inside the rowdblclick function. The app is now no longer displaying the pop-up window.Comment
-
Are you getting an error? Is you alert showing?Comment
-
I am using Chrome as the browser. I installed Firebug lite and Firebug console. The alert window is coming up. The panel window is not coming up. Firebug is not reporting any error. Here is where I put the code:
Btw, I'm moving forward with adding a form (with fieldsets) to the window. I'm trying to baby-step through adding the neccessary code to display detailed invoice information. I was trying to determine if the window that pops up will have the new invoice information. I was hoping using the HTML property of a panel would suffice.Code:listeners:{ rowdblclick: function(grid, rowIndex, columnIndex, e) { currentRecordInvoice = grid.getStore().getAt(rowIndex); invoiceNumber = currentRecordInvoice.get('RINV'); alertMsg = 'Invoice Number is: ' + invoiceNumber; alert(alertMsg); panelInvoiceNorth.update('<div>text text' + invoiceNumber + ' text text text</div>'); windowInvoice.show(); } },
Oh, fyi, I haven't used Firebug, Valence or ExtJS in a few months. I recall developing Valence apps that Firebug used to warn me when there was a javascript error. I'm not sure if something has changed where I have to turn on a setting or something to get it to warn me.Last edited by rkanemeier; 03-20-2012, 10:30 AM.Comment
-
I ended up getting a resolution from Sean over the phone. I needed to discuss some licensing concerns and Sean was available to help. The problem was that the panelInvoiceNorth object was not yet created (ergo the HTML was not yet created) at the point where I was invoking the invoicePanelNorth.update method. I just need to put the update after the windowInvoice.show() and it worked!
Thanks for the help!Comment
Comment