PDA

View Full Version : Loading a form from json/perl/mysql help



angrek
14 Apr 2009, 9:44 AM
I'm a bit new to this and I've been trying to help myself and figure it out but I've been banging my head against a wall for a week with this. I'm pulling data from a mysql database with perl and outputting it to json. I got a grid working and it's great. I then created a link for each item on the grid to go to a form that is populated with that item's data. I created a second perl/json setup for this to just pull one row, but I just can't seem to populate the fields. I'd really appreciate anyone telling me what I'm missing here. I don't seem to be getting any errors from firebug either..... help? :-/

Json output (looks identical to my grid except that I'm only pulling one record):


{"totalCount":"1","rows":[{"closed_time":"04/01/2009 - 1:3","others":"none","comments":"Server reboot has completed, and services are back online at this time. thanks for your patience!","submitted_time":"04/01/2009 11:00","time03":"n/a","date03":"","outage":"Outage","time01":"1:30pm","closed_by":"brian","description_of_change":" Graphics system MGFX","outage_type":"Server","id":"1000","severity":"Medium Priority","planned":"Planned","date01":"04/01/2009","submitted_by":"brian","phone":"8117","additional_text":"MS-LT1 (MGFX)","outage_status":"closed","supervisor":"Brian","date02":"04/01/2009","reason_for_interruption":"per Tim: We are getting complaints about the graphics system being slow through EPS. This would probably be resolved by restarting the MS-LT1 server","time02":"1:40pm"}]}


my .js page: (I realize not all of the fields match, I was just trying to work with the first couple to get something to come through at all and I was trying different things.....)




Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

var store = new Ext.data.JsonStore({
root: 'rows',
totalProperty: 'totalCount',
idProperty: 'id',
remoteSort: false,
fields: [
{name: 'id'},
{name: 'submitted_by'},
{name: 'submitted_time'},
{name: 'closed_by'},
{name: 'closed_time'},
{name: 'outage_status'},
{name: 'planned'},
{name: 'outage_type'},
{name: 'outage'},
{name: 'severity'},
{name: 'additional_text'},
{name: 'date01'},
{name: 'time01'},
{name: 'date02'},
{name: 'time02'},
{name: 'description_of_change'},
{name: 'reason_for_interruption'},
{name: 'supervisor'},
{name: 'phone'},
{name: 'comments'},
{name: 'date03'},
{name: 'time03'},
{name: 'others'}
proxy: new Ext.data.HttpProxy({
url: 'http://tracker/ext/examples/form/outage_not_info_json.cgi'
})
});
//set ASC and DESC here for page, but in DB call for whole table
store.setDefaultSort('id', 'ASC');
store.load();

var tab2 = new Ext.FormPanel({
frame: true,
standardSubmit: true,
labelWidth: 110,
title: 'Outage Notification Details',
store: store,
bodyStyle:'padding:0 10px 0;',
width: 640,
items: [{
layout: 'column',
border: false,
defaults: {
columnWidth: '.5',
border: false
},
items: [{
bodyStyle: 'padding-right:5px;',
items: {
xtype:'fieldset',
title: '',
autoHeight: true,
defaultType: 'textfield', // each item will be a checkbox
items: [{
id: 'id',
name: 'id',
fieldLabel: 'Outage ID'
},{
id: 'submitted_by',
name: 'submitted_by',
fieldLabel: 'Submitted By'
},{
inputValue: 'submitted_time',
fieldLabel: 'Submitted Time'
},{
value: 'severity',
fieldLabel: 'Severity'
},{
xtype: 'textfield',
value: 'outage',
fieldLabel: 'OS'
},{
xtype: 'textfield',
name: 'additional_text',
fieldLabel: 'Login Acct'
}]
}
},{
bodyStyle: 'padding-left:5px;',
items: {
xtype:'fieldset',
title: '',
autoHeight: true,
defaultType: 'radio', // each item will be a radio button
items: [{
xtype: 'textfield',
name: 'location',
fieldLabel: 'Location',
},{
xtype: 'textfield',
name: 'warranty_date',
fieldLabel: 'Warranty Date'
},{
xtype: 'textfield',
name: 'serial_number',
fieldLabel: 'Serial Number'
},{
xtype: 'textfield',
name: 'priority',
fieldLabel: 'Priority'
},{
xtype: 'textfield',
name: 'ip_address',
fieldLabel: 'IP'
},{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password'
}]
}
}]


},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:0 10px 0;'},
items:[{
title:'Passwords',
layout:'form',
defaults: {width: 130},
defaultType: 'textfield',

items: [{
fieldLabel: 'Username',
name: 'first',
allowBlank:false,
},{
fieldLabel: 'Password',
name: 'last',
value: ''
},{
fieldLabel: 'Username',
name: 'company',
}, {
fieldLabel: 'Password',
name: 'email',
vtype:'email'
}]
},{
title:'Comments',
layout:'form',
defaults: {width: 330},
defaultType: 'textfield',

items: [{
xtype:'textarea',
name: 'home',
}]
},{
cls:'x-plain',
title:'Add Comments',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Add Comments'
}
}]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});

tryanDLS
14 Apr 2009, 10:18 AM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

Add handlers to the store's load and loadexception methods and set breakpoints there to see if you getting the data loaded successfully.

chrisvensko
14 Apr 2009, 11:05 AM
Have you thought about loading that one record from your grid's data store? If you do it that way, you won't even need to make another trip to the server.

Perhaps something like this:

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
// r.data will hold the "row" from your original store
// For example r.data.id will hold the id of the row you clicked on
});


This example has a working copy of doing this, but they use a template instead of a form.
http://extjs.com/deploy/dev/examples/grid/binding.html