View Full Version : A really dont understand why this doesnt work, please help!
alexbariv
29 May 2009, 2:32 PM
Hi.
I'm writing an application, and already have problems just adding a toolbar.
This is my code:
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.namespace('myApp');
myApp.app = function() {
function onItemClick(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
}
myApp.ToolBar = Ext.extend(Ext.Toolbar, {
initComponent:function() {
var config = {
tbar : {
text : 'Admin',
tooltip : {text:'Just Testing', title:'Tip'},
items : [{
text: 'Click', handler: onItemClick,
}],
}
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
}
});
Ext.reg('toolbar', myApp.ToolBar);
return {
init: function(){
Ext.QuickTips.init();
var vp = new Ext.Viewport({
layout:'border',
border:true,
items:[{
region : 'north',
xtype : 'toolbar'
},{
region : 'center',
border : false,
html : ' center panel'
}]
});
}
};
}();
And in the HTML i have:
......
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/air/AIRMenuBuilder.js"></script>
<script type="text/javascript" src="lib/air/AIRLocalizer.js"></script>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
<script type="text/javascript">
Ext.onReady(myApp.app.init, myApp.app);
</script>
</head>
<body id="main">
</body>
......
As you see i'm just trying to create a border layout with a nice toolbar at the top.
When i run this, appear a little bar at the top, but with none of the options :(
What do i have wrong ? :(
Thanks in advance!
tryanDLS
29 May 2009, 2:53 PM
Why are you extending Toolbar to do that? That's class misuse situation of extend-to-configure. Just build the Toolbar instance.
hendricd
29 May 2009, 2:54 PM
@alexbariv -- Some tweakage (and food for thought):
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.namespace('myApp');
myApp.app = function() {
function onItemClick(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
}
myApp.ToolBar = Ext.extend(Ext.Toolbar, {
initComponent:function() {
var config = {
tbar : {
text : 'Admin', //toolbars don't have tbars (or text), buttons do !
items : [{
tooltip : {text:'Just Testing', title:'Tip'},
text: 'Click',
handler: onItemClick
}]
}
};
myApp.ToolBar.superclass.initComponent.call(this, Ext.apply (this.initialConfig, config));
}
});
Ext.reg('apptoolbar', myApp.ToolBar);
return {
init: function(){
Ext.QuickTips.init();
this.vp = new Ext.Viewport({
layout:'border',
border:true,
tbar : new myApp.ToolBar(), // <--better
items:[{
region : 'north',
xtype : 'apptoolbar' //possible, but confusing
},{
region : 'center',
border : false,
html : ' center panel'
}]
});
}
};
}();
alexbariv
29 May 2009, 3:12 PM
Nice, this clears a lot a lot of doubts but still doesn't work... You say that buttons have text, but, how can i define buttons in the toolbar ? i thought that was the wai.
And yes, maybe I'm taking the module pattern far but its the only way that i see this more clear.
The application will have a lot of forms so i thought that this will be the best approach (correct me if I'm wrong).
Thanks in advance for all the help.
Here is an example of an login form:
http://extjs.com/learn/Tutorial:Basic_Login
there is a login button in the form.
I think thats the way to do it ..
,buttons:[{
text:'Login',
handler:function(){
}
....
alexbariv
29 May 2009, 7:39 PM
So...
myApp.ToolBar = Ext.extend(Ext.Toolbar, {
initComponent:function() {
var config = {
buttons:[{
text: 'Test',
handler: function(){
}
}]
};
myApp.ToolBar.superclass.initComponent.call(this, Ext.apply (this.initialConfig, config));
}
});
But still nothing...
All the samples that i see around are without the module pattern, i cant find a sample that solve this :(
Sorry, and thanks in advance for any help.
hendricd
29 May 2009, 8:05 PM
.... All the samples that i see around are without the module pattern, i cant find a sample that solve this :(
It's not clear (to me anyway ;) ) just what there is 'to solve'? Few (if any) actually extend the Toolbar class just create a Toolbar module that is only good for a single purpose. But if you must, 'items' is what you seek:
myApp.ToolBar = Ext.extend(Ext.Toolbar, {
initComponent:function() {
this.items = [{
text: 'Test',
handler: function(){}
}];
myApp.ToolBar.superclass.initComponent.call(this);
}
});
Examine the source of Toolbar.js:initComponent and you'll see what going on..
alexbariv
30 May 2009, 7:18 AM
:)) Wow! Finally!, i was trying with:
....
initComponent:function() {
items = [{
text: 'Test',
handler: function(){}
}];
....
I forgot for complete the scope. With "this.", everything start working =P~
So, now i can play with the form component too.
This is the full code, now working with the form too, but if you could bring me a little more help, how could i make this form center in the panel like a window. Because now takes the full width and height of this. :-?
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.namespace('myApp');
myApp.app = function() {
function onItemClick(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
}
myApp.ToolBar = Ext.extend(Ext.Toolbar, {
initComponent : function() {
this.items = [{
text : 'Test',
handler : function(){}
}];
myApp.ToolBar.superclass.initComponent.call(this);
}
});
Ext.reg('ToolBar', myApp.ToolBar);
myApp.FormLogin = Ext.extend(Ext.FormPanel, {
initComponent : function() {
Ext.apply(this, {
width : 300,
height : 300,
labelWidth : 80,
frame : true,
title : 'My Form',
defaultType : 'textfield',
monitorValid : true,
});
this.items = [{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}];
this.buttons = [{
text:'Login',
handler:function(){
Ext.Msg.alert('Status', 'So, ok')
}
}];
myApp.FormLogin.superclass.initComponent.call(this);
}
});
Ext.reg('FormLogin', myApp.FormLogin);
return {
init: function(){
Ext.QuickTips.init();
this.vp = new Ext.Viewport({
layout:'border',
border:true,
items:[{
region : 'north',
xtype : 'ToolBar',
border : true
},{
region : 'center',
xtype : 'FormLogin',
border : true
}]
});
}
};
}();
This is working perfect (in adobe air btw). All that i need is take a bit more of control of the view. :">
Animal
30 May 2009, 8:00 AM
Why don't you just use the class in the way you usually use classes?
Just create a Toolbar passing a configuration.
There is absolutely no need to create a subclass in this situation.
alexbariv
30 May 2009, 8:24 AM
The thing is that this app will have a lot of forms, so i thought that this aproach will be the best for my issue.
Then i create all the forms in separated js and just call them.
Or it is a better approach ?
Powered by vBulletin® Version 4.2.3 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.