Simple Form Example with Popup Customer Lookup [Archive] - CNX Corporation Support and Information Forums

MarcoF

08-25-2010, 01:04 PM

Hi, I used the Example in the title as a base to handle the communication between two process.

The calling part activate the popup window:

var newWindow = window.open('vvcall.pgm?opt=1008&pgm=vvinit&sid=' + sid,'tabID1025','height=500,width=640,scrollbars=y es,resizable=yes,toolbar=no,menubar=no,top=200,lef t=250,location=no,statusbar=no');

and the popup window send back the selected item to the caller using:

gridClausole.on('rowclick', function(grid, rowIndex, columnIndex, e) {
var id = grid.getStore().getAt(rowIndex).get('ID');
//window.opener.focus();
window.opener.setIdTesto(id);
close();
});

the caller receive the selected item via:

window.setIdTesto = function(idTestoDaRecuperare) {
getIdTesto(idTestoDaRecuperare);
};

at this point I should see a post issued from the function "getIdTesto":

var getIdTesto = function(idTestoPassato) {
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getHTML',
pgm: 'OFTEXSTD01',
idTesto: idTestoPassato
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
if (ModalitaGestione == 'M') {
Ext.getCmp('add_FORMTEST').insertAtCursor(data.FOR MTEST);}
if (ModalitaGestione == 'I'){
Ext.getCmp('edit_FORMTEST').insertAtCursor(data.FO RMTEST);}}
else{
Ext.Msg.alert('Failure','Failed to receive default values from server');
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
});
};

but nothing happen, in firebug I don't see any POST.

Any idea?

TIA
MarcoF

richard.milone

08-26-2010, 07:58 AM

The ordering of your code might be important. You cannot reference a function before it's defined. Can you post up your entire code all in one block?

MarcoF

08-26-2010, 08:07 AM

Hi Richard, thanks as usual, here is the code.

The caller part:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2010 CNX Corporation, All Rights Reserved">
<title>Valence - AutoCode - Grid Maintenance 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">

Ext.onReady(function(){

//### GLOBAL SETTINGS/VARIABLES ################################################## #################
Ext.form.Field.prototype.msgTarget = 'under';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var ModalitaGestione = 'N'; // N=Non definita, I=Inserimento, M=Modifica

var getIdTesto = function(idTestoPassato) {
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getHTML',
pgm: 'OFTEXSTD01',
idTesto: idTestoPassato
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
if (ModalitaGestione == 'M') {
Ext.getCmp('add_FORMTEST').insertAtCursor(data.FOR MTEST);}
if (ModalitaGestione == 'I'){
Ext.getCmp('edit_FORMTEST').insertAtCursor(data.FO RMTEST);}}
else{
Ext.Msg.alert('Failure','Failed to receive default values from server');
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
});
};
//### DATA STORES ################################################## ###############################
var dsMainOFTEXSTDGrid = new Ext.data.JsonStore({
autoLoad: true,
url: "vvcall.pgm",
remoteSort: true,
sortInfo: {
field: 'DESCTEST',
direction: 'asc'
},
root: "autogrid",
totalProperty: "totalCount",
listeners:{
beforeload: function(){
this.baseParams = {
pgm: 'OFTEXSTD',
search: Ext.getCmp('search').getValue(),
action: 'getRecords',
limit: 25,
start: 0
}
}
},
fields: ["UTENTECR","DATAORAC","UTENTEMO","DATAORAM","STATOREC","ID","DESCTEST","TIPOTEST"]
})

//### FUNCTIONS ################################################## #################################

// function to handle editing a record...
// if called with submit=true...then it will initiate the ajax call to the back-end program
// otherwise, simply display the edit panel
//
function fnEditRecord(submit){
if (submit == true){
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'updateRecord',
pgm: 'OFTEXSTD',
UTENTECR:Ext.getCmp('edit_UTENTECR').getValue(),
DATAORAC:Ext.getCmp('edit_DATAORAC').getValue(),
UTENTEMO:Ext.getCmp('edit_UTENTEMO').getValue(),
DATAORAM:Ext.getCmp('edit_DATAORAM').getValue(),
STATOREC:Ext.getCmp('edit_STATOREC').getValue(),
ID:Ext.getCmp('edit_ID').getValue(),
DESCTEST:Ext.getCmp('edit_DESCTEST').getValue(),
TIPOTEST:Ext.getCmp('edit_TIPOTEST').getValue(),
FORMTEST:Ext.getCmp('edit_FORMTEST').getValue()
},
success: function(response){
var check = response.responseText;
if (check) {
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1') {
Ext.getCmp('vport').getLayout().setActiveItem(0);
parent.showMessage('','<b><center>Record Updated</b></center>');
dsMainOFTEXSTDGrid.reload();
} else {
Ext.getCmp(data.FLD).markInvalid(data.MSG);
Ext.getCmp(data.FLD).focus();
}
}
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
})
} else{
currentRecord = Ext.getCmp('mainOFTEXSTDGrid').getSelectionModel() .getSelected();
Ext.getCmp('vport').getLayout().setActiveItem(1);
}
}
function fnRightClick(grid,rowIndex,e){
e.stopEvent();
if (!Ext.getCmp('mainGridContextMenu')){
mainGridContextMenu = new Ext.menu.Menu({
id: 'mainGridContextMenu',
items: [
{text:'Delete',id:'menu_Delete',iconCls:'cross',ha ndler:fnDeleteRecord}
]
})
}
grid.getSelectionModel().selectRow(rowIndex);
currentRecord = grid.getStore().getAt(rowIndex);
mainGridContextMenu.showAt(e.getXY());
}
// function to handle adding a record...
// if called with submit=true...then it will initiate the ajax call to the back-end program
// otherwise, simply display the add panel
function fnAddRecord(submit){
if (submit == true){
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'addRecord',
pgm: 'OFTEXSTD',
ID:Ext.getCmp('add_ID').getValue(),
DESCTEST:Ext.getCmp('add_DESCTEST').getValue(),
TIPOTEST:Ext.getCmp('add_TIPOTEST').getValue(),
FORMTEST:Ext.getCmp('add_FORMTEST').getValue()
},
success: function(response){
var check = response.responseText;
if (check) {
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1') {
parent.showMessage('','<b><center>Record Added</b></center>');
Ext.getCmp('vport').getLayout().setActiveItem(0);
dsMainOFTEXSTDGrid.reload();
} else {
try {
Ext.getCmp(data.FLD).markInvalid(data.MSG);
Ext.getCmp(data.FLD).focus();
} catch(e){
Ext.Msg.alert('Error','An error occured when attempting to add a new record');
}
}
}
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
})
} else{
Ext.getCmp('vport').getLayout().setActiveItem(2);
}
}
// initiate an ajax request to delete the selected record...
//
function fnDeleteRecord(){
Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this record?', function(btn, text){
if (btn=='yes') {
Ext.getBody().mask('<B>Deleting record...</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'deleteRecord',
pgm: 'OFTEXSTD',
ID: currentRecord.data.ID
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
parent.showMessage('','<b><center>Record Deleted</b></center>');
dsMainOFTEXSTDGrid.reload();
} else{
Ext.Msg.alert('Error',data.MSG);
}
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
})
}
})
}
// Attiva copia record
function fnCopiaTesti(editazione){
if (editazione == true){
ModalitaGestione = 'M';
}
else {ModalitaGestione = 'I'};
var newWindow = window.open('vvcall.pgm?opt=1008&pgm=vvinit&sid=' + sid,'tabID1025','height=500,width=640,scrollbars=y es,resizable=yes,toolbar=no,menubar=no,top=200,lef t=250,location=no,statusbar=no');
newWindow.focus();
}
//### WIDGETS/COMPONENTS ################################################## ########################

// the initial grid displayed...
//
var mainOFTEXSTDGrid = new Ext.grid.GridPanel({
id: 'mainOFTEXSTDGrid',
store: dsMainOFTEXSTDGrid,
stateful: true,
stripeRows: true,
columnLines: true,
hideMode: 'offsets',
columns: [
{header: '<b>Utente</b>',width: 110,sortable: true,dataIndex: 'UTENTECR'},
{header: '<b>Data/Ora</b>',width: 182,sortable: true,dataIndex: 'DATAORAC'},
{header: '<b>Utente</b>',width: 110,sortable: true,dataIndex: 'UTENTEMO'},
{header: '<b>Data/Ora</b>',width: 182,sortable: true,dataIndex: 'DATAORAM'},
{header: '<b>Stato</b>',width: 55,sortable: true,dataIndex: 'STATOREC'},
{header: '<b>Id</b>',width: 99,sortable: true,dataIndex: 'ID'},
{header: '<b>Descrizione</b>',width: 225,sortable: true,dataIndex: 'DESCTEST'},
{header: '<b>Tipo</b>',width: 44,sortable: true,dataIndex: 'TIPOTEST'}
],
loadMask: true,
listeners: {
rowdblclick: fnEditRecord,
rowcontextmenu: fnRightClick
},
tbar: [
{text:'Add',id:'button_Add',iconCls:'add',handler: fnAddRecord},
{xtype:'tbtext',text:'Search:'},
{
xtype: 'trigger',
id: 'search',
triggerClass: 'x-form-clear-trigger',
onTriggerClick: function(){
this.setValue('');
Ext.getCmp('mainOFTEXSTDGrid').getBottomToolbar(). changePage(1);
}
}
],
keys: [{
key: Ext.EventObject.ENTER,
fn: function() {
Ext.getCmp('mainOFTEXSTDGrid').getBottomToolbar(). changePage(1);
}
}],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: dsMainOFTEXSTDGrid,
displayInfo: true,
displayMsg: 'Showing records {0} - {1} of {2}',
emptyMsg: "No records to display",
plugins: [new Ext.ux.vvPagingToolbarPlugin()]
})
})
// new panel which will be displayed when editing a record...
//
var editPanel = new Ext.Panel({
title: 'Edit Record',
iconCls: 'edit',
id: 'editPanel',
frame: true,
tbar: [
{text:'Save',iconCls:'save',handler:function(){fnE ditRecord(true);}},
{text:'Cancel',iconCls:'cancel',handler:function() {
Ext.getCmp('vport').getLayout().setActiveItem(0);
}},
{text:'Copia',iconCls:'search',handler:function(){ fnCopiaTesti(true);}}
],
listeners:{
beforeshow:function(){
Ext.getBody().mask('<B>Retrieving record details...</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getRecord',
pgm: 'OFTEXSTD',
ID: currentRecord.data.ID
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
Ext.getCmp('edit_UTENTECR').setValue(data.UTENTECR );
Ext.getCmp('edit_DATAORAC').setValue(data.DATAORAC );
Ext.getCmp('edit_UTENTEMO').setValue(data.UTENTEMO );
Ext.getCmp('edit_DATAORAM').setValue(data.DATAORAM );
Ext.getCmp('edit_STATOREC').setValue(data.STATOREC );
Ext.getCmp('edit_ID').setValue(data.ID);
Ext.getCmp('edit_DESCTEST').setValue(data.DESCTEST );
Ext.getCmp('edit_TIPOTEST').setValue(data.TIPOTEST );
Ext.getCmp('edit_FORMTEST').setValue(data.FORMTEST );
} else{
Ext.Msg.alert('Record Not Found','Hmmm...could not retrieve the record');
Ext.getCmp('vport').getLayout().setActiveItem(0);
}
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
})
}
},
items:[{
xtype:'fieldset',
layout:'form',
autoHeight: true,
autoWidth: true,
labelAlign: 'right',
labelWidth: 200,
items:[{
xtype:'displayfield',
id:'edit_UTENTECR',
fieldLabel:'Utente che ha creato il testo'
},{
xtype:'displayfield',
id:'edit_DATAORAC',
fieldLabel:'Creazione testo'
},{
xtype:'displayfield',
id:'edit_UTENTEMO',
fieldLabel:'Utente che ha modificato il testo'
},{
xtype:'displayfield',
id:'edit_DATAORAM',
fieldLabel:'Modifica testo'
},{
xtype:'displayfield',
id:'edit_STATOREC',
fieldLabel:'Stato record'
},{
xtype:'displayfield',
id:'edit_ID',
fieldLabel:'Id testo'
},{
xtype:'textfield',
id:'edit_DESCTEST',
autoCreate:{
tag:'input',
maxlength:'50'
},
fieldLabel:'Descrizione sintetica testo'
},{
xtype:'textfield',
id:'edit_TIPOTEST',
autoCreate:{
tag:'input',
maxlength:'1'
},
fieldLabel:'Testo per clausole'
},{
xtype:'htmleditor',
id:'edit_FORMTEST',
autoCreate:{
tag:'input',
maxlength:'5000'
},
width: 550,
height: 235,
fieldLabel:'Testo'
}]
}]
})
// new panel which will be displayed when adding a record...
//
var addPanel = new Ext.Panel({
title: 'Add Record',
id: 'addPanel',
iconCls: 'add',
frame: true,
tbar: [
{text:'Save',iconCls:'save',handler:function(){fnA ddRecord(true);}},
{text:'Cancel',iconCls:'cancel',handler:function() {
Ext.getCmp('vport').getLayout().setActiveItem(0);
}},
{text:'Copia',iconCls:'search',handler:function(){ fnCopiaTesti(false);}}
],
listeners:{
beforeshow:function(){
Ext.getBody().mask('<B>Retrieving default values...</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getFieldDefaults',
pgm: 'OFTEXSTD'
},
success: function(response){
var check = response.responseText;
if (check){
var data = Ext.util.JSON.decode(response.responseText);
if (data.SUCCESS == '1'){
Ext.getCmp('add_ID').setValue(data.ID);
Ext.getCmp('add_DESCTEST').setValue(data.DESCTEST) ;
Ext.getCmp('add_TIPOTEST').setValue(data.TIPOTEST) ;
Ext.getCmp('add_FORMTEST').setValue(data.FORMTEST) ;
} else{
Ext.Msg.alert('Failure','Failed to receive default values from server');
};
}
Ext.getBody().unmask();
},
failure: function(){
Ext.getBody().unmask();
Ext.Msg.alert('Failure','Failed to receive a response from server');
}
})
}
},
items:[{
xtype:'fieldset',
layout:'form',
autoHeight: true,
autoWidth: true,
labelAlign: 'right',
labelWidth: 200,
items:[{
xtype:'displayfield',
id:'add_ID',
fieldLabel:'Id testo'
},{
xtype:'textfield',
id:'add_DESCTEST',
autoCreate:{
tag:'input',
maxlength:'50'
},
fieldLabel:'Descrizione sintetica testo'
},{
xtype:'textfield',
id:'add_TIPOTEST',
autoCreate:{
tag:'input',
maxlength:'1'
},
fieldLabel:'Tipo: <> da blanks per clausole'
},{
xtype:'htmleditor',
id:'add_FORMTEST',
autoCreate:{
tag:'input',
maxlength:'5000'
},
width: 550,
height: 235,
fieldLabel:'Testo'
}]
}]
})
// viewport definition to ensure the entire viewing space of the browser is utilized
//
var vp = new Ext.Viewport({
id: 'vport',
layout: 'card',
activeItem: 0,
items:[mainOFTEXSTDGrid,editPanel,addPanel]
})

//
window.setIdTesto = function(idTestoDaRecuperare) {
getIdTesto(idTestoDaRecuperare);
};

});
</script>
</head>
<body>
</body>
</html>

and the called one:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2010 Mr S.r.l. Unipersonale, All Rights Reserved">
<title>Origine per Drag and Drop dei testi standard (Lettere o Clausole)</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">

Ext.onReady(function() {

// data store
var dsLettere = new Ext.data.JsonStore({
autoLoad: true,
url: 'vvcall.pgm',
baseParams: {
pgm: 'oftexstd01',
action: 'getLettere'
},
root: 'LETTERE',
fields: ['TITOLO', 'ID']
});

// column model
var colModelLettere = new Ext.grid.ColumnModel([{
header: "<b>Titolo Lettera</b>",
sortable: true,
width: 200,
dataIndex: 'TITOLO'
}, {
header: "<b>Id</b>",
sortable: true,
width: 50,
dataIndex: 'ID'
}]);

// grid: detail view
var gridLettere = new Ext.grid.GridPanel({
region: 'north',
autoScroll: true,
title: 'Lettere',
header: false,
loadMask: true,
store: dsLettere,
cm: colModelLettere
});

// data store
var dsClausole = new Ext.data.JsonStore({
autoLoad: true,
url: 'vvcall.pgm',
baseParams: {
pgm: 'oftexstd01',
action: 'getClausole'
},
root: 'CLAUSOLE',
fields: ['TITOLO', 'ID']
});

// column model
var colModelClausole = new Ext.grid.ColumnModel([{
header: "<b>Titolo Clausola</b>",
sortable: true,
width: 200,
dataIndex: 'TITOLO'
}, {
header: "<b>Id</b>",
sortable: true,
width: 50,
dataIndex: 'ID'
}]);

// grid: detail view
var gridClausole = new Ext.grid.GridPanel({
region: 'center',
autoScroll: true,
title: 'Clausole',
header: false,
loadMask: true,
store: dsClausole,
cm: colModelClausole
});

var panelMainNorth = new Ext.Panel({
anchor: '100%, 50%',
layout: 'hbox',
layoutConfig: {
pack: 'start',
align: 'stretch'
},
items: [gridLettere]
});
// main center panel for holding Dettaglio previsione per sito
var panelMainCenter = new Ext.Panel({
anchor: '100%, 50%',
layout: 'border',
items: [gridClausole]
});
// viewport
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'panel',
layout: 'anchor',
items:[panelMainNorth,panelMainCenter]
}]
});

// listener: row double click to select, send back to calling program and close window
gridLettere.on('rowclick', function(grid, rowIndex, columnIndex, e) {
var id = grid.getStore().getAt(rowIndex).get('ID');
window.opener.setIdTesto(id);
close();
});

// listener: row double click to select, send back to calling program and close window
gridClausole.on('rowclick', function(grid, rowIndex, columnIndex, e) {
var id = grid.getStore().getAt(rowIndex).get('ID');
//window.opener.focus();
window.opener.setIdTesto(id);
close();
});
});

</script>
</head>
<body>
</body>
</html>

TIA
MarcoF

MarcoF

08-31-2010, 11:21 AM

I made some variations but the risult is always the same, any idea in the meanwhile?

TIA
MarcoF

richard.milone

09-01-2010, 03:10 PM

Hi MarcoF, unfortunately this is not an easy one to diagnose without debugging the actual code when running with the backend. Normally CNX only provides this type of assistance to those with a paid support pack. If your company has already purchased a paid support pack, please email support@cnxcorp.com with your company name so that we can cross-reference your forum profile to your company and you can get the support you need. If you don't have a support pack and would like to purchase one, please visit the Valence Store at http://www.cnxcorp.com/store/

MarcoF

09-02-2010, 01:52 PM

Thanks Richard, I understand. I'll think about it.

MarcoF