PDA

View Full Version : Can't Extend a class (Ext.form.FormPanel)



senseo
19 Aug 2011, 11:34 PM
Hello everyone, I'm new to Sencha so apologize for some basic questions.

I try to use the Oreilly sample, and add one of my pages. The pages contains basic forms.

So what I do is:


aes.views.Search = Ext.extend(Ext.form.FormPanel, {
}

But i got the error: Attempting to extend from a class which has not been loaded on the page.

How can I do to inherit from all the classes, or just be able to inherit from the desired one ? Or how can I load the page on the page ?

Thanks

tierrarara
20 Aug 2011, 4:29 PM
Are you sure the namespace"aes.view" exist ? you can see my example:



App.views.FormBase = Ext.extend(Ext.form.FormPanel, {

initComponent: function() {
App.views.FormBase.superclass.initComponent.call(this);
},

/**
*
* @param Ext.data.Errors
*/
showErrors: function(errors) {

//this.resetFormErrors();

errors.each(function(item,idx,length){
this.getFields(item.field).addCls('invalid-field');


var errorField = this.down('#'+item.field+'ErrorField');

errorField.update(item.message);//errors.getByfiel(item.field);

errorField.show();


},this);

//fieldset.setInstructions("Please amend the flagged fields");
},

resetFormErrors: function() {
var f = this.getFields();


for(byName in f) {// no funciona con Ext.each
this.resetFieldError(this.getFields(byName));
}


},

resetFieldError: function(field) {
var errorField = this.down('#'+field.name+'ErrorField');
errorField.hide();
field.removeCls('invalid-field');
return errorField;
}

});


Ext.reg('App.views.FormBase', App.views.FormBase);



this example work rigth

senseo
22 Aug 2011, 1:06 AM
Thanks for the help, but still not working.

Here is what I got, everything should be ok .....what I am missing ?

Search.js

aes.views.Search = Ext.extend(Ext.FormPanel, {


initComponent: function () {
aes.views.Search.superclass.initComponent.call(this);
},


/**
*
* @param Ext.data.Errors
*/
showErrors: function (errors) {


//this.resetFormErrors();


errors.each(function (item, idx, length) {
this.getFields(item.field).addCls('invalid-field');




var errorField = this.down('#' + item.field + 'ErrorField');


errorField.update(item.message); //errors.getByfiel(item.field);


errorField.show();




}, this);


//fieldset.setInstructions("Please amend the flagged fields");
},


resetFormErrors: function () {
var f = this.getFields();




for (byName in f) {// no funciona con Ext.each
this.resetFieldError(this.getFields(byName));
}
},


resetFieldError: function (field) {
var errorField = this.down('#' + field.name + 'ErrorField');
errorField.hide();
field.removeCls('invalid-field');
return errorField;
}
});
Ext.reg('search', aes.views.Search);


App.js

aes.cfg = {};

aes.App = Ext.extend(Ext.TabPanel, {

fullscreen: true,

tabBar: {
ui: 'gray',
dock: 'bottom',
layout: { pack: 'center' }
},

cardSwitchAnimation: false,

initComponent: function() {


if (navigator.onLine) {
this.items = [{
xtype: 'traininglist',
iconCls: 'bookmarks',
title: 'ABC',
confTitle: this.title,
shortUrl: this.shortUrl
}, {
xtype: 'search',
title: 'ABC',
iconCls: 'search2'
},{
title: 'ABC',
iconCls: 'locate4',
xtype: 'location',
coords: this.gmapCoords,
mapText: this.gmapText,
permLink: this.gmapLink
}, {
title: 'ABC',
xtype: 'aboutlist',
iconCls: 'info',
pages: this.aboutPages
}];
} else {
this.on('render', function(){
this.el.mask('No internet connection');
}, this);
}

aes.cfg = {};
aes.cfg.shortUrl = this.shortUrl;
aes.cfg.title = this.title;

aes.App.superclass.initComponent.call(this);
}
});


index.html

<script type="text/javascript" src="src/Models.js"></script>
<script type="text/javascript" src="src/App.js"></script>




<!--NEW-->
<script type="text/javascript" src="src/TrainingList.js"></script>
<script type="text/javascript" src="src/TrainingDetail.js"></script>
<script type="text/javascript" src="src/Search.js"></script>