PDA

View Full Version : Error When Extending Toolbar Class



Chris55
21 Sep 2009, 7:13 PM
I am relatively new to Extjs and need assistance in resolving an issue I am having when pre-configuring the Toolbar class . Here is my class extension code encapsulated in file application.adminmenu.js:


Application.AdminMenu = new Ext.Toolbar({
height: 23
,items: [
{
text: 'Orders'
,menu: OrderMenu // <- local var
}
,{
text: 'Inventory'
,menu: InventoryMenu // <- local var }
]
}); // eo Application.AdminMenu

Ext.reg('adminmenu', Application.AdminMenu);When I call the xtype from my application.js script, it blows up in FireBug as 'Application.AdminMenu undefined'. Thank you!

karieanis
21 Sep 2009, 8:32 PM
I would strongly suggest that you read the following article on extending Ext classes: http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies (http://www.extjs.com/forum/../learn/Tutorial:Extending_Ext_for_Newbies). What you're currently doing is instancing a class, and trying to make an xtype for this instance. An xtype should be a reference to the class name it needs to construct the required object.

Chris55
21 Sep 2009, 8:53 PM
Thank you for the response. I will read the tutorial reference you provided. I have read Saki's contribution to "Writing a Big Application in Ext (parts 1-3)." The link is here: http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/. However, still a little puzzled why my Application.AdminMenu reference is null.


I would strongly suggest that you read the following article on extending Ext classes: http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies (http://www.extjs.com/forum/../learn/Tutorial:Extending_Ext_for_Newbies). What you're currently doing is instancing a class, and trying to make an xtype for this instance. An xtype should be a reference to the class name it needs to construct the required object.

danh2000
21 Sep 2009, 9:16 PM
Chris55,

The error message you provide is throwing me off scent - I would expect an invalid constructor message or similar. I also doubt that the Ext.reg call would provide any error message - I don't think you've posted the code that is producing the error.

Anyway, a couple of things to look into:

Have you namespaced 'Application' before you attempt to use it?

How will you expect to reuse an instance? it isn't a constructor, so the reg call is useless anyway.

If you actually wanted to extend the toolbar class, that's not what you are doing, you would want to use Ext.extend, not create an instance with the new keyword.

Chris55
21 Sep 2009, 9:30 PM
You are right. After reading the "newbies" extension article I see mistakes I have generated. I will make changes and post the results later today (currently 1:30 AM EST and I am tired). Thanks again.


Chris55,

The error message you provide is throwing me off scent - I would expect an invalid constructor message or similar. I also doubt that the Ext.reg call would provide any error message - I don't think you've posted the code that is producing the error.

Anyway, a couple of things to look into:

Have you namespaced 'Application' before you attempt to use it?

How will you expect to reuse an instance? it isn't a constructor, so the reg call is useless anyway.

If you actually wanted to extend the toolbar class, that's not what you are doing, you would want to use Ext.extend, not create an instance with the new keyword.

Chris55
23 Sep 2009, 8:40 AM
I performed more reading about Extending an Ext class (among other things, of course) but my toolbar still does not render when calling it from my page.init :: xtype: AdminMenu. Below is the toolbar source that I encapsulate in a file called Application.AdminMenu. Your help is appreciated. Thanks.


var OrderMenu = new Ext.menu.Menu({
items: [
{
text: 'Summary'
/*,handler: onItemClick*/
}
,{
text: 'Fulfillment'
/*,handler: onItemClick*/
}
,{
text: 'Back Orders'
/*,handler: onItemClick*/
}
,{
text: 'Returns'
/*,handler: onItemClick*/
}
]
});

var InventoryMenu = new Ext.menu.Menu({
items: [
{
text: 'Merchandise'
/*,handler: onItemClick*/
,items: [
{
text: 'New'
/*,handler: onItemClick*/
}
,{
text: 'Edit'
/*,handler: onItemClick*/
}
]
}
,{
text: 'Edit Merchandise'
/*,handler: onItemClick*/
}
,{
text: 'Quantity'
/*,handler: onItemClick*/
}
]
});

Application.AdminMenu = Ext.extend(Ext.Toolbar, {
initComponent:function() {
Ext.apply(this, {
height: 23
,items: [
{
text: 'Orders'
,menu: OrderMenu
}
,{
text: 'Inventory'
,menu: InventoryMenu
}
]
})
Application.AdminMenu.superClass.initComponent.apply(this, arguments);
} // eo function initComponent
}
); // eo Application.AdminMenu

Ext.reg('adminmenu', Application.AdminMenu);

Chris55
23 Sep 2009, 12:35 PM
I could really use a second eye here. I am trying to prototype a sample UI for my boss so that we can move over to Extjs for future Web 2.0 work. So your input is appreciated. Thanks again.

karieanis
23 Sep 2009, 7:13 PM
You're missing a namespace statement for Application.AdminMenu, which should appear like so:



Ext.namespace('Application.AdminMenu');

Application.AdminMenu = ...
Also, make sure that superclass is lowercase.

Chris55
23 Sep 2009, 8:32 PM
Thank you for the reply. I made the changes you suggested but still cannot render the extended toolbar. If I create a new Toolbar, like the south region, it works fine. But if I include the AdminMenu xtype, it doesn't render at all. I included the full source below encapsulated in 2 files:


// file: application.js

Ext.BLANK_IMAGE_URL = 'ext/ext-3.0.0/resources/images/default/s.gif';
Ext.ns('Application');

var page = {};
page.init = function()
{

this.viewport = new Ext.Viewport({
id: 'page-viewport'
,layout: 'border'
,title: 'Console Name'
,items: [
{
region: 'north'
,id: 'north-panel'
,height: 23
,layout: {
type: 'toolbar'
}
,xtype: 'adminmenu' //<- inlcude for admin menu
}
,{
region: 'south'
,id: 'south-panel'
,height: 23
,margin: '0 0 0 0'
,tbar: new Ext.Toolbar(
{
height: 23
,items: ["South Toolbar"]
}
)
}
,{
/*layout: 'border',*/
id: 'layout-browser'
,region:'west'
,border: false
,split:true
,margins: '2 0 5 5'
,width: 250
,minSize: 100
,maxSize: 500
/*,items: [treePanel, detailsPanel]*/
,layout: {
type: 'accordion'
}
,layoutConfig: {
animate: true
}
,items: [
{
title: 'Treeview'
,html: '<p>TreeView to go here.</p>'
,border: false
}
,{
title: 'Notifications'
,html: '<p>Notifications to go here.</p>'
,border: false
}
]
}
/*,new Ext.TabPanel({
region: 'center'
,deferredRender: false
,activeTab: 0,
items: [
{
title: 'Welcome'
,autoScroll: true
,html: '<p>Content here.</p>'
}
]
})*/
,{
id: 'content-panel'
,region: 'center'
,layout: 'card',
layoutConfig: {deferredRender: false}
,margins: '2 5 5 0'
,activeItem: 0,
border: false,
items: [
{
id: 'start-panel'
,layout: 'fit'
,bodyStyle: 'padding:25px'
,margin: '8 8 8 8'
/*,contentEl: 'start-div'*/
}
]
}
]
}); // eo Viewport instance

};// eo function page.init

Ext.onReady(page.init, page, true);
// eo file application.js


// file application.adminmenu.js
var OrderMenu = new Ext.menu.Menu({
items: [
{
text: 'Summary'
/*,handler: onItemClick*/
}
,{
text: 'Fulfillment'
/*,handler: onItemClick*/
}
,{
text: 'Back Orders'
/*,handler: onItemClick*/
}
,{
text: 'Returns'
/*,handler: onItemClick*/
}
]
}); // eo var OrderMenu

var InventoryMenu = new Ext.menu.Menu({
items: [
{
text: 'Merchandise'
/*,handler: onItemClick*/
,items: [
{
text: 'New'
/*,handler: onItemClick*/
}
,{
text: 'Edit'
/*,handler: onItemClick*/
}
]
}
,{
text: 'Price'
/*,handler: onItemClick*/
}
,{
text: 'Quantity'
/*,handler: onItemClick*/
}
]
}); // eo var InventoryMenu

Ext.ns('Application.AdminMenu');
Application.AdminMenu = Ext.extend(Ext.Toolbar, {
initComponent:function() {
Ext.apply(this, {
height: 23
,items: [
{
text: 'Orders'
,menu: OrderMenu
}
,{
text: 'Inventory'
,menu: InventoryMenu
}
]
})
Application.AdminMenu.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}
); // eo Application.AdminMenu

Ext.reg('adminmenu', Application.AdminMenu);
// eo file application.adminmenu.js
You're missing a namespace statement for Application.AdminMenu, which should appear like so:



Ext.namespace('Application.AdminMenu');

Application.AdminMenu = ...
Also, make sure that superclass is lowercase.

danh2000
23 Sep 2009, 9:09 PM
Chris,

You only need Ext.ns('Application') then you can start using it (it just creates an object), so your Ext.ns('Application.AdminMenu') isn't needed.

When you declare the 'AdminMenu', you are really just creating a property on the 'Application' object named 'AdminMenu'.

When you specify layouts, you can just use a string not an object if specifying the type:



layout: 'toolbar'

and


layout: 'accordian'

Also get a copy of Firebug plugin for FireFox and run it with 'Break on all errors'.

This should get you closer...

Chris55
23 Sep 2009, 9:31 PM
Danh2000, thanks. If I eliminate layout: {type: 'toolbar|accordion'} it doesn't render at all. Also I set FBug to Break on All Errors but no errors are captured. Do you have any other suggestions? Thanks.


Chris,

You only need Ext.ns('Application') then you can start using it (it just creates an object), so your Ext.ns('Application.AdminMenu') isn't needed.

When you declare the 'AdminMenu', you are really just creating a property on the 'Application' object named 'AdminMenu'.

When you specify layouts, you can just use a string not an object if specifying the type:



layout: 'toolbar'
and


layout: 'accordian'Also get a copy of Firebug plugin for FireFox and run it with 'Break on all errors'.

This should get you closer...

danh2000
23 Sep 2009, 11:24 PM
Chris,

Your code did indeed produce an error in Firebug - you really need to learn and practice with Firebug - you're unlikely to get far without it.

I have quickly reformatted your code - it's not exactly as I would approach it, but it should run without error.

As you'll see, I omitted the page.init thing - I didn't see the benefit.



Ext.BLANK_IMAGE_URL = 'ext/ext-3.0.0/resources/images/default/s.gif';
Ext.ns('Application');

var OrderMenu = new Ext.menu.Menu({
items: [{
text: 'Summary'
},{
text: 'Fulfillment'
},{
text: 'Back Orders'
},{
text: 'Returns'
}]
}); // eo var OrderMenu

var InventoryMenu = new Ext.menu.Menu({
items: [{
text: 'Merchandise',
items: [{
text: 'New'
},{
text: 'Edit'
}]
},{
text: 'Price'
},{
text: 'Quantity'
}]
}); // eo var InventoryMenu

Application.AdminMenu = Ext.extend(Ext.Toolbar, {
initComponent:function() {
Ext.apply(this, {
height: 23,
items: [{
text: 'Orders',
menu: OrderMenu
},{
text: 'Inventory',
menu: InventoryMenu
}]
});
Application.AdminMenu.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo Application.AdminMenu

Ext.reg('adminmenu', Application.AdminMenu);

Ext.onReady(function(){
this.viewport = new Ext.Viewport({
id: 'page-viewport',
layout: 'border',
title: 'Console Name',
items: [{
region: 'north',
id: 'north-panel',
layout : 'toolbar',
xtype: 'adminmenu' //<- inlcude for admin menu
},{
region: 'south',
id: 'south-panel',
height: 23,
margin: '0 0 0 0',
tbar: new Ext.Toolbar({
items: ["South Toolbar"]
})
},{
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 250,
minSize: 100,
maxSize: 500,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{
title: 'Treeview',
html: '<p>TreeView to go here.</p>',
border: false
},{
title: 'Notifications',
html: '<p>Notifications to go here.</p>',
border: false
}]
},{
id: 'content-panel',
region: 'center',
layout: 'card',
layoutConfig: {
deferredRender: false
},
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [{
id: 'start-panel',
layout: 'fit',
bodyStyle: 'padding:25px',
margin: '8 8 8 8'
}]
}]
}); // eo Viewport instance

});


I think you would probably benefit from looking at some of the combination samples and seeing how they use layouts and toolbars.

HTH,

Dan

PS. I didn't mean eliminate layout, I just meant that you could use a string to specify the type instead of using the object literal as you originally had.

Chris55
24 Sep 2009, 6:55 AM
I eliminated Ext.ns('Application.AdminMenu') and all is now fine. Thank you karieanis and danh2000! I am sure this is not my last forum post so look out for me. Peace.