PDA

View Full Version : Form not updating



janusmccarthy
12 Jun 2010, 9:01 PM
I have the following script which attaches to a div that contains an html table. When a row is clicked a lightbox appears that shows information about the table row. Everything works fine on the initial click and the form populates, but if I close the lightbox and click on another row, I get the same information that was displayed on the first attempt, i.e. the script fails to update the form on subsequent clicks. Any idea what I'm doing wrong?



Ext.BLANK_IMAGE_URL = 'jscripts/ext/resources/images/default/s.gif';
Ext.onReady(function()
{
Ext.QuickTips.init();
var win;
Ext.get( 'log_table').on('click', showLightbox, {stopEvent:false});

function showLightbox( e)
{
if( !formpanel)
{
var formpanel = new Ext.form.FormPanel({
xtype : 'form',
autoDestroy : true,
autoScroll : true,
id : 'formpanel',
defaultType : 'field',
frame : false,
title : 'Record Details',
border : 0,
items : [
{
fieldLabel : 'Icon Location',
name: 'icon',
disabled: true,
anchor: '100%'
},
{
fieldLabel : 'Priority Level',
name: 'priority',
disabled: true,
anchor: '100%'
},
{
fieldLabel : 'Generating Script',
name : 'page',
disabled: true,
anchor: '100%'
},
{
fieldLabel : 'Time Generated',
name : 'timestamp',
disabled: true,
anchor: '100%'
},
{
fieldLabel : 'IP Address',
name : 'ip',
disabled: true,
anchor: '100%'
},
{
fieldLabel : 'Log Message',
name : 'msg',
disabled: true,
anchor: '100%'
}
]
});
}

if( !win)
{
win = new Ext.Window(
{
id: 'lightbox',
layout:'form',
height:300,
width: 600,
closable: true,
resizable: true,
autoDestroy: true,
closeAction: 'hide',
modal: true,
items: [ formpanel],

});
}

var row = e.getTarget( 'TR');
var form = formpanel.getForm();
var children = row.children;

form.findField( 'icon').value=children[ 0].children[ 0].src;
form.findField( 'priority').value=children[ 1].innerHTML;
form.findField( 'page').value=children[ 2].innerHTML+".php";
form.findField( 'timestamp').value=children[ 3].innerHTML;
form.findField( 'ip').value=children[ 4].innerHTML;
form.findField( 'msg').value=children[ 5].innerHTML;

for( i=0; i < children.length; i++)
{
console.log( children[ i].innerHTML);
}

win.show();
};


});
100,1 Bot

if( !win)
{
win = new Ext.Window(
{
id: 'lightbox',
layout:'form',
height:300,
width: 600,
closable: true,
resizable: true,
autoDestroy: true,
closeAction: 'hide',
modal: true,
items: [ formpanel],

});
}

var row = e.getTarget( 'TR');
var form = formpanel.getForm();
var children = row.children;

form.findField( 'icon').value=children[ 0].children[ 0].src;
form.findField( 'priority').value=children[ 1].innerHTML;
form.findField( 'page').value=children[ 2].innerHTML+".php";
form.findField( 'timestamp').value=children[ 3].innerHTML;
form.findField( 'ip').value=children[ 4].innerHTML;
form.findField( 'msg').value=children[ 5].innerHTML;

for( i=0; i < children.length; i++)
{
console.log( children[ i].innerHTML);
}

win.show();
};


});

16 Jun 2010, 6:21 PM
use setValue.

I suggest reading the formPanel API and learn more about Ext JS in general.

janusmccarthy
16 Jun 2010, 10:45 PM
I'm slowly working my way through learning extjs now, but I wanted to see something and just couldn't find out how to update the form. Thanks.