PDA

View Full Version : Form not loading. Could use a second set of eyes



iwerks
17 Feb 2014, 9:04 PM
I have a container that contains two components (1) a simple form and a grid panel. When the view containing the two components is load the grid panel populates with no problems, but the form remains blank.

Form Code:



Ext.define('Scada.view.workbench.TemplateEditForm', {
extend: 'Ext.form.Panel',
alias : 'widget.templateform',
addMode : false,
title : 'Template Information',
frame: true,
config: {
devicetypeid: 1,
criterea:'Template'
},
constructor: function(cfg) {
this.initConfig(cfg);
this.callSuper(arguments);
},
initComponent: function() {
this.store = this.buildStore();
this.items = this.buildItems();
this.buttons = this.buildButtons();
this.callParent();
},
buildItems: function(){
return [{
xtype: 'form',
items: [
{
xtype: 'hiddenfield',
name : 'id',
itemId : 'devicetypeid'
},
{
xtype: 'textfield',
itemId : 'name',
name : 'name',
allowBlank: false,
fieldLabel: 'Template Name',
size: 10,
maxLength: 15
},
{
xtype: 'textfield',
name : 'description',
itemId : 'description',
allowBlank: true,
fieldLabel: 'Description',
size: 31,
maxLength: 100
},
{
xtype: 'textfield',
name : 'vendor',
itemId : 'vendor',
allowBlank: true,
fieldLabel: 'Vendor',
size: 31,
maxLength: 30
},
{
xtype: 'checkbox',
fieldLabel : "IsMeter:",
labelSeparator : ' '
},
{
xtype: 'checkbox',
fieldLabel : "IsGenset:",
labelSeparator : ' '
},
{
xtype: 'checkbox',
fieldLabel : "IsUPS:",
labelSeparator : ' '
},
{
xtype: 'checkbox',
fieldLabel : "IsTripUnit:",
labelSeparator : ' '

}
]
}
];
},
buildStore : function(){ //defining the device`s store
var mystore = Ext.create('Scada.store.workbench.Templates');
mystore.load({
scope : this,
params:{
deviceid: this.devicetypeid,
criterea: this.criterea
},
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like
mystore.model = mystore.getUpdatedRecords().getAt(0);
console.log(success);
//this.getForm().loadRecord(mystore.);
}
});

return mystore;
},
buildButtons: function(){
return [{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
}

});


Form Model Code:



var lProxyCfg = {
ns: Scada.Constants.NS_EXTJS_SCADA_NAV,
api: {
create: Scada.Constants.TT_CREATE,
read: Scada.Constants.TT_READ,
update: Scada.Constants.TT_UPDATE,
destroy: Scada.Constants.TT_DESTROY
},
reader : {
type : 'json',
root : 'data',
totalProperty: 'totalCount'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
root: 'data'
}
};


var lJWSProxy = new Ext.jws.data.Proxy(lProxyCfg);



Ext.define('Scada.model.workbench.Template',{
extend : 'Ext.data.Model',
associations: [{
type: 'hasMany',
model: 'devices.Point',
name: 'points'
}],
proxy: lJWSProxy,
//idProperty: 'devicetypeid',
fields: [
{name: 'devicetypeid', type: 'int'},
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'vendor', type: 'string'},
{name: 'meter', type: 'boolean'},
{name: 'genset', type: 'boolean'},
{name: 'ups', type: 'boolean'},
{name: 'tripunit', type: 'boolean'}
]
});

Form's Store Code:


Ext.define('Scada.store.workbench.Templates',{
extend : 'Ext.data.Store',
requires:['Scada.model.workbench.Template'],
model : 'Scada.model.workbench.Template',
autoSync: true,
autoLoad: false,
pageSize: 10

});


Controller that loads Form into a container:



Ext.define('Scada.controller.workbench.Template',{
extend : 'Ext.app.Controller',
requires: ['Scada.Constants'],
views: ['workbench.TemplateEditForm','devices.PointGrid'],
stores:['workbench.Templates', 'devices.Points'],
models:['workbench.Template','devices.Point'],
init : function(){
var me = this;
me.id = '';
me.cmd = '';
me.option = false;
me.control({
//save record info from the edit window
'templateform button[action=save]' : {
click : me.saveTemplate
},
'pointgrid button[action=add]' : {
click : me.addPoint
},
'pointgrid button[action=delete]' : {
click : me.deletePoint
},
'pointgrid toolbar #importbtn' : {
click : me.importPoints
},
'pointgrid toolbar #exportbtn' : {
click : me.exportPoints
}

});

},
setId: function(id){
this.id = id;
//Ext.Msg.alert('Info', 'Id is set');
},
setCmd: function(cmd){
this.cmd = cmd;
//Ext.Msg.alert('Info', 'Cmd is set');
},
//False = Template. True = Points
setControlOption: function(cmd){
this.option = cmd;
},
saveTemplate: function(){
Ext.Msg.alert('Info', 'Accessing saveTemplate from Template controller');
},
addPoint: function(){
Ext.Msg.alert('Info', 'Accessing addPoint from Template controller');
},
deletePoint: function(){
Ext.Msg.alert('Info', 'Accessing deletePoint from Template controller');
},
importPoints: function(){
Ext.Msg.alert('Info', 'Accessing importPoints from Template controller');
//var upload = Ext.create('Scada.view.FileUpload');
//upload.show();
},
exportPoints: function(){
Ext.Msg.alert('Info', 'Accessing exportPoints from Template controller');
//var upload = Ext.create('Scada.view.FileUpload');
//upload.show();
},
addContent : function(){
//Ext.Msg.alert('Info', 'Trying to add components to container');
if(!this.option){
this.container.add({
xtype: 'templateform',
itemId: 'templateForm',
devicetypeid: this.id,
critera: 'Template',
width: 992

});
}

this.container.add({
xtype : 'pointgrid',
itemId: 'templatePointGrid',
deviceid: this.id,
criterea: this.cmd,
width: 992

});
}

});


Resulting data from server:



message origin=ws://localhost:8787, data={"type":"response","code":0,"msg":"ok","utid":3,"ns":"org.jwebsocket.plugins.scada.nav","reqType":"read","name":"EPM9650Q","tripunit":false,"meter":false,"ups":false,"genset":false,"description":"GE Power Meter","vendor":"GE","totalCount":1}

It seems to come after the form is already initialized.
Any help would be greatly appreciated.

scottmartin
19 Feb 2014, 12:29 PM
Commented out?
this.getForm().loadRecord(record);

iwerks
19 Feb 2014, 1:12 PM
I commented that line out and add mystore.model = mystore.getUpdatedRecords().getAt(0); in it's place. The commented out line did not seem to make a difference.

scottmartin
19 Feb 2014, 1:50 PM
The following seems to work:



{
"data": [{
"type": "response",
"code": 0,
"msg": "ok",
"utid": 3,
"ns": "org.jwebsocket.plugins.scada.nav",
"reqType": "read",
"name": "EPM9650Q",
"tripunit": false,
"meter": true,
"ups": false,
"genset": false,
"description": "GEPowerMeter",
"vendor": "GE",
"totalCount": 1
}]
}




Ext.define('MyModel', {
extend: 'Ext.data.Model',

fields: [{
name: 'devicetypeid',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'description',
type: 'string'
}, {
name: 'vendor',
type: 'string'
}, {
name: 'meter',
type: 'boolean'
}, {
name: 'genset',
type: 'boolean'
}, {
name: 'ups',
type: 'boolean'
}, {
name: 'tripunit',
type: 'boolean'
}],

proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'data'
}
}
});

Ext.onReady(function() {

var store = Ext.create('Ext.data.Store', {
model: 'MyModel'
});

var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 500,

layout: 'anchor',
defaults: {
anchor: '100%'
},

defaultType: 'textfield',

items: [{
xtype: 'hiddenfield',
name: 'id',
itemId: 'devicetypeid'
}, {
xtype: 'textfield',
itemId: 'name',
name: 'name',
allowBlank: false,
fieldLabel: 'Template Name',
size: 10,
maxLength: 15
}, {
xtype: 'textfield',
name: 'description',
itemId: 'description',
allowBlank: true,
fieldLabel: 'Description',
size: 31,
maxLength: 100
}, {
xtype: 'textfield',
name: 'vendor',
itemId: 'vendor',
allowBlank: true,
fieldLabel: 'Vendor',
size: 31,
maxLength: 30
}, {
xtype: 'checkbox',
fieldLabel: "IsMeter:",
name: 'meter', // added field name
labelSeparator: ' '
}, {
xtype: 'checkbox',
fieldLabel: "IsGenset:",
labelSeparator: ' '
}, {
xtype: 'checkbox',
fieldLabel: "IsUPS:",
labelSeparator: ' '
}, {
xtype: 'checkbox',
fieldLabel: "IsTripUnit:",
labelSeparator: ' '

}],

renderTo: Ext.getBody()

});

Ext.create('Ext.Button', {
text: 'Load Store',
renderTo: Ext.getBody(),

handler: function() {
store.load({
callback: function(records, operation, success) {
form.loadRecord(store.getAt(0));
}
});
}
});


});


You should move this out of your view and into your controller as well

iwerks
20 Feb 2014, 7:21 PM
Thanks a lot that worked for me.