PDA

View Full Version : One class rather than one which call an other



lpastor
17 Aug 2009, 8:37 AM
Hello,

To be more precise, I have changed the title of my post, you can see directly my second post below.

------------------------------------------------------------------------------

I have an error in firebug : userForm.loadRecord is not a function.

I use a grid linked with a form, this function is to put data in the form, when I select a row.



var userGrid = Ext.extend(Ext.grid.GridPanel, {
region: 'west',
border: false,
iconCls: 'silk-grid',
frame: true,
width: 440,
store: store,
columns : userColumns,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
userForm.loadRecord(rec); // <-- This line have a problem !!!
}
},
initComponent : function() {
this.viewConfig = {forceFit: true };
userGrid.superclass.initComponent.call(this);
}
});

var userForm = Ext.extend(Ext.form.FormPanel, {
iconCls: 'silk-user',
labelAlign: 'right',
frame: true,
width: 360,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
region: 'center',
collapsible: false,
animCollapse: false,
listeners: {
create : function(fpanel, data) { // <-- custom "create" event defined in App.user.Form class
var rec = new userGrid.store.recordType(data);
userGrid.store.insert(0, rec);
}
},
initComponent : function() {
// build the form-fields. Always a good idea to defer form-building to a method so that this class can
// be over-ridden to provide different form-fields
this.items = this.buildForm();

// build form-buttons
this.buttons = this.buildUI();

// super
userForm.superclass.initComponent.call(this);
},

/**
* buildform
* @private
*/
buildForm : function() {
return [
{fieldLabel: 'nom', name: 'nom_type_dem', allowBlank: false},
{fieldLabel: 'info', name: 'info_type_dem', allowBlank: true}
];
},

/**
* buildUI
* @private
*/
buildUI: function(){
return [{
text: 'Save',
iconCls: 'icon-save',
handler: this.onUpdate,
scope: this
}, {
text: 'Create',
iconCls: 'silk-user-add',
handler: this.onCreate,
scope: this
}, {
text: 'Reset',
handler: function(btn, ev){
this.getForm().reset();
},
scope: this
}, {
text: 'Delete',
handler: this.onDelete,
scope: this
}];
},

/**
* loadRecord
* @param {Record} rec
*/
loadRecord : function(rec) {
this.record = rec;
this.getForm().loadRecord(rec);
},

/**
* onUpdate
*/
onUpdate : function(btn, ev) {
if (this.record == null) {
return;
}
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid.");
return false;
}
this.getForm().updateRecord(this.record);
store.load();
//Ext.Msg.alert('Good', 'Ca marche');
},

/**
* onCreate
*/
onCreate : function(btn, ev) {
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid");
return false;
}
this.fireEvent('create', this, this.getForm().getValues());
this.getForm().reset();
store.load();
},

/**
* onReset
*/
onReset : function(btn, ev) {
this.fireEvent('update', this, this.getForm().getValues());
this.getForm().reset();
},

onDelete : function(btn, ev) {

if (this.record == null) {
return;
}
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid.");
return false;
}
this.record.store.remove(this.record);

}
});

var win = new Ext.Window({
title: 'Layout Window',

collapsible:true,
closable:true,
width:800,
height:400,
layout: 'border',
items: [new userGrid, new userForm]
});

win.show(this);

17 Aug 2009, 8:50 AM
userForm.getForm().loadRecord

lpastor
17 Aug 2009, 9:09 AM
Thank's JGarcia, but problem is the same.

In fact, when I use the original script, that's work fine :


var gridlp = Ext.extend(Ext.grid.GridPanel, {
iconCls: 'silk-grid',
frame: true,
//title: 'Users',
//height: 300,
width: 440,
initComponent : function() {
this.viewConfig = {forceFit: true };
gridlp.superclass.initComponent.call(this);
}
});

var formlp = Ext.extend(Ext.form.FormPanel, {
iconCls: 'silk-user',
labelAlign: 'right',
//title: 'User -- All fields are required',
frame: true,
width: 360,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
initComponent : function() {
// build the form-fields. Always a good idea to defer form-building to a method so that this class can
// be over-ridden to provide different form-fields
this.items = this.buildForm();

// build form-buttons
this.buttons = this.buildUI();

// super
formlp.superclass.initComponent.call(this);
},

/**
* buildform
* @private
*/
buildForm : function() {
return [
{fieldLabel: 'nom', name: 'nom_type_dem', allowBlank: false},
{fieldLabel: 'info', name: 'info_type_dem', allowBlank: true}
];
},

/**
* buildUI
* @private
*/
buildUI: function(){
return [{
text: 'Save',
iconCls: 'icon-save',
handler: this.onUpdate,
scope: this
}, {
text: 'Create',
iconCls: 'silk-user-add',
handler: this.onCreate,
scope: this
}, {
text: 'Reset',
handler: function(btn, ev){
this.getForm().reset();
},
scope: this
}, {
text: 'Delete',
handler: this.onDelete,
scope: this
}];
},

/**
* loadRecord
* @param {Record} rec
*/
loadRecord : function(rec) {
this.record = rec;
this.getForm().loadRecord(rec);
},

/**
* onUpdate
*/
onUpdate : function(btn, ev) {
if (this.record == null) {
return;
}
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid.");
return false;
}
this.getForm().updateRecord(this.record);
store.load();
//Ext.Msg.alert('Good', 'Ca marche');
},

/**
* onCreate
*/
onCreate : function(btn, ev) {
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid");
return false;
}
this.fireEvent('create', this, this.getForm().getValues());
this.getForm().reset();
store.load();
},

/**
* onReset
*/
onReset : function(btn, ev) {
this.fireEvent('update', this, this.getForm().getValues());
this.getForm().reset();
},

onDelete : function(btn, ev) {

if (this.record == null) {
return;
}
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid.");
return false;
}
this.record.store.remove(this.record);
//Ext.Msg.alert('Good', 'Ca marche');
}
});

// create user.Grid instance (@see UserGrid.js)
var userGrid = new gridlp({
region: 'west',
border: false,
store: store,
columns : userColumns,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
userForm.loadRecord(rec); // <-- Here that's work well !!!
}
}
});

// create user.Form instance (@see UserForm.js)
var userForm = new formlp({
region: 'center',
collapsible: false,
animCollapse: false,
listeners: {
create : function(fpanel, data) {
var rec = new userGrid.store.recordType(data);
userGrid.store.insert(0, rec);
}
}
});


var win = new Ext.Window({
title: 'Layout Window',
collapsible:true,
closable:true,
width:800,
height:400,
layout: 'border',
items: [userGrid, userForm]
});

win.show(this);

I would like to reduce the code, also, rather than having a userGrid class that call userlp class, I tried to have 1 class only : userGrid.

I think it's possible, but I am not good enough...

Laurent

17 Aug 2009, 9:14 AM
I'm very confused. you have the reference userForm in two areas with two different meanings.

andycramb
17 Aug 2009, 1:06 PM
In your example that works the userForm variable references the instantiated extended class through
new gridlp()

You have
items: [new userGrid, new userForm]

I am not sure what this does without the () or a reference to it as well.

I think you should change the name of your gridPanel and your formPanel extended classes

Instantiate them like


var userGrid = new extendedGridPanel();
var userForm = new extendedFormPanel();


You should then be able to reference the methods within each object as
userForm.loadRecord(rec); as long as the scope is ok

Add them to the window item as such

items: [userGrid, userForm]

So it is one object that references another object