PDA

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.

tob1
29 May 2009, 4:13 PM
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 ?