PDA

View Full Version : define with Extend Ext.panel.Panel



popiero70
1 Aug 2012, 5:24 AM
Hallo,
I created a component class with Ext.window.Window.
This class is create in this way :
Ext.define('NSPACE.view.MyCmp', {extend: 'Ext.window.Window',
alias: 'widget.mycmp', ....

So i create an istance into my viewport.
In this way there isn't problems.

At the end I thought to create a component class MyCmp with
extend: 'Ext.panel.Panel'
but when I create an istance into viewport nothing works.

Why ?? Where is the problem ?

Thanks.

friend
1 Aug 2012, 6:26 AM
If you accidentally create two views with the same class name (like 'NSPACE.view.MyCmp'), you'll get a blank, white page and no error message on the console.

Be sure that the class extended from Ext.window.Window and the class extended from Ext.panel.Panel each have a unique name.

popiero70
1 Aug 2012, 6:54 AM
If you accidentally create two views with the same class name (like 'NSPACE.view.MyCmp'), you'll get a blank, white page and no error message on the console.

Be sure that the class extended from Ext.window.Window and the class extended from Ext.panel.Panel each have a unique name.

Hallo friend,
I fear that I badly explained.
I define one component with MyCmp.
The first time extend Ext.window.Window and function.
The second time replace extend: Ext.window.Window with extend: Ext.panel.Panel but in this way I get a blank, white page and no error message on the console.

I hope I have explained my problem well.

Thanks.

scottmartin
1 Aug 2012, 8:12 AM
Please post your code so we can help.

Scott.

popiero70
1 Aug 2012, 11:47 PM
Please post your code so we can help.

Scott.


app.js:



Ext.application({
requires : ['Ext.container.Viewport'],
name: 'AAA',
appFolder: 'app',
controllers: ['Example'],
autoCreateViewport: true,
launch: function() {
}
});


Into 'app/view' folder there is:

Viewport.js:



Ext.define('AAA.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'AAA.view.MyComponent'
],
layout: 'fit',
initComponent: function() {

this.items= [{
id: 'pnl',
xtype: 'panel',
items: [
{
id: 'ris1',
xtype: 'button',
name: 'result',
text : 'Result',
}


],


html:'Main Panel'}];

this.callParent(arguments);
}
});


Risultato.js: This is my component



Ext.define('AAA.view.MyComponent', {
extend: 'Ext.window.Window', ---------------->>Ext.panel.Panel

alias: 'widget.mycomponent',
//title: 'Results',
numx: 1,
width: 800,
height: 600,
Layout: 'fit',
border: false,
autoshow: true,

initComponent: function (){
this.callParent(arguments);
}
});


At the end there is the controller:

Into 'app/controller' folder there is:



Ext.define('AAA.controller.Example', {extend: 'Ext.app.Controller',
init: function() {this.control({
'#ris1' : {click: this.onRisultato}
},
onRisultato: function(){
var winris= Ext.create('widget.mycomponent',{title: 'MyComponent'});
winris.show();
}
});



Thanks.