PDA

View Full Version : Some Problems with Pre-configured Classes



Besessener
9 Jul 2010, 5:58 AM
Because of a new project i'll try to transfer saki's description about "Writing a big Application".
Now i got some problems with this.
I've got 3 js-files:

menu.js:

var config = {
title: 'Navigation',
id: 'navId',
region:'west',
html: 'hallo menu',
layout: 'fit',
width: 300
}; // eo config

Testy.Menu = Ext.extend(Ext.Panel, {
border:false,

initComponent: function() {
Ext.apply(this, config ); // config laden

Testy.Menu.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender: function() {

Testy.Menu.superclass.onRender.apply(this, arguments)
} // eo function onRender

}); // eo extend


Ext.reg('Menu', Testy.Menu);main.js:

var tabs = [];

var config = {
title: 'Tabpanel',
id: 'tabId',
region:'center',
viewConfig: {forceFit:true},
html: 'hallo',
layout:'fit',
activeTab:0,
deferredRender:false,
layoutOnTabChange: true,
items: tabs
}; // eo config

Testy.Main = Ext.extend(Ext.TabPanel, {
border:false,

initComponent: function() {
Ext.apply(this, config ); // config laden

Testy.Main.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender: function() {

Testy.Main.superclass.onRender.apply(this, arguments)
} // eo function onRender

}); // eo extend


Ext.reg('Main', Testy.Main);index.js:

Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif';
Ext.ns('Testy');

Ext.onReady( function () {

Ext.QuickTips.init();

new Ext.Viewport({
layout:'border',

items: [
new Testy.Menu(),
new Testy.Main()
]
});

});First off all: is this the normal way to do a structured code?
But now i got a mostly white display with an unnormal layout, could somebody explain it?
Please take a look on my screenshot.

Animal
9 Jul 2010, 6:07 AM
Why bother with a class?



var tabs = [];
var main = new Ext.TabPanel({
title: 'Tabpanel',
id: 'tabId',
region:'center',
viewConfig: {forceFit:true},
html: 'hallo',
layout:'fit',
activeTab:0,
deferredRender:false,
layoutOnTabChange: true,
items: tabs
});

var west = new Ext.Panel({
title: 'Navigation',
id: 'navId',
region:'west',
html: 'hallo menu',
layout: 'fit',
width: 300
})

Ext.onReady( function () {

Ext.QuickTips.init();

new Ext.Viewport({
layout:'border',

items: [ main, west ]
});

});


I mean, you are never going to be instantiating lots of them are you? So no need for a class.

Condor
9 Jul 2010, 6:09 AM
1. Do NOT create the config object outside of initComponent (your code could break on complex types like viewConfig and items).
2. You not only need to apply the config object to 'this', but also to 'this.initialConfig', e.g.

Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

Besessener
9 Jul 2010, 6:36 AM
Thanks Animal and Condor,

because i'm not familiar with coding a big application i was searched a good description to to this and so i found saki's.

Animal:
You're right, i think there's no need to initialize a class more than one time in my app. I replaced my code with yours and got two errors in firebug:
this.layout.setContainer is not a function AND
comp is undefined. Now this code is in this two files seperated i posted before. In my opinion it makes sense to seperated it in divers files.

Condor:
thanks, i remember you posted this in this forum somewhere else :)

Animal
9 Jul 2010, 6:50 AM
Obviously you can't say activeTab: 0 with no tabs there.

Also you can't tell TabPanel what layout to use. It's a card layout Panel with a built-in card switching UI.

Animal
9 Jul 2010, 6:50 AM
And you can't give it html. It holds tabs.

And it doesn't have a viewConfig!

Besessener
9 Jul 2010, 7:32 AM
Thanks a alot Animal.
It works now. My fault, my brain melts due to the heat here in germany ;)

What do you think about the structure / separation?

Animal
9 Jul 2010, 7:37 AM
By all means separate the declarations. Just don't bother creating a subclass.

Besessener
9 Jul 2010, 8:37 AM
Animal, could you give me an example for this? This would really help me :)

Animal
9 Jul 2010, 9:20 AM
I don't understand "example"

I'm just saying use

var myPanel = new Ext.Panel({blah

That's it. Just create the Components that you need.

Besessener
9 Jul 2010, 11:40 AM
Ok, now i understand.
I seperate too much for you :)


var mypanel = new Ext.Panel({
title = 'testy'
});

and so on.
Not:


var config = {
title = 'testy'
};

var mypanel = new Ext.Panel(config);

Right?

Animal
9 Jul 2010, 12:21 PM
There's no difference between those two code fragments.

Besessener
12 Jul 2010, 3:42 AM
Ok thanks for help. Now there's another problem i can't fix.

projekt.js

var ProjekteGridStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: './php/' + ProjektePHP
}),
baseParams: {task: 'ProjekteGridStore'},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'projekt_id'
},[
{name: 'projekt_id'}
]),
sortInfo:{field: 'projekt_id', direction: "ASC"}
}); // eo gridStore
ProjekteGridStore.load({params:{start:0, limit:ProjekteProSeite}});

var ProjekteGridColumnModel = new Ext.grid.ColumnModel([
{
header: "Projekt Id",
width: 20,
dataIndex: 'projekt_id',
hidden: true
}
]); // eo columnModel

var config = {
title:'Projekte',
region:'center',
store: ProjekteGridStore,
colModel: ProjekteGridColumnModel,
}; // eo config

projExt.ProjekteGrid = new Ext.grid.GridPanel(config);

main.js

var tabs = [projExt.projekte];

var config = {
title: 'Tabpanel',
id: 'mainTabPanelId',
region:'center',
activeTab:0,
deferredRender:false,
layoutOnTabChange: true,
items: tabs
}; // eo config

projExt.Main = new Ext.TabPanel(config);

Now i get
comp is undefined and don't know where it comes from.
Without including the tabs it works.

Condor
12 Jul 2010, 4:11 AM
Animal was only partially correct. There IS a difference, but it is only important if you put objects (like store and colModel) into the config object.

If you create a single config object and use this to create all grid instances then they will all use the same store and column model (and column models can't be shared across grids).

In short, don't define objects in a common config object. Create new objects in initComponent for every instance your create.

Besessener
12 Jul 2010, 4:58 AM
Thanks for your hint about it.
But i'm stuck at the moment. Even if i declare everything in projekt.js in the config it won't work.

If i do it like this:

new Ext.grid.GridPanel({
id: 'endeNeueroeffnungenGridId',
title: 'Ablaufende Neueröffnungen',
region:'north',
iconCls: 'dialog-warning',
autoScroll:true,
border: true,
height: 150,
bodyStyle: 'background-color: rgb(230,0,0)',
store: endeNeueroeffnungShopStore,
loadMask: new Ext.LoadMask(Ext.getBody(), {msg:"Bitte warten ..."}),
stripeRows: true,
selModel: new Ext.grid.RowSelectionModel({ singleSelect:false }),
columns:[{
header: 'ID',
dataIndex: 'orts_id',
sortable: true,
hidden: true,
width: 25
},{
header: 'Ablaufdatum',
dataIndex: 'ablaufdatum',
renderer: renderDate,
sortable: true,
width: 70
},{
header: 'Name',
dataIndex: 'shopname',
sortable: true,
width: 190
}]
}),

it works, but it think it's too large and i would like to seperate it in parts.
Btw. i didn't do anything with "initComponent" till now.

Condor
12 Jul 2010, 5:01 AM
Coming back to your previous example:

What is projExt.projekte? I only see a projExt.ProjekteGrid.

Besessener
12 Jul 2010, 5:23 AM
Yes, sorry.
It has to be

var tabs = [projExt.ProjekteGrid];
But no difference with the error.

Condor
12 Jul 2010, 5:53 AM
You also have trailing commas in your code. Try running it through jslint.com.

Besessener
12 Jul 2010, 6:12 AM
Thats a good tip with jslint.com
I found the trailling comma, but with no effect :(

Condor
12 Jul 2010, 6:20 AM
OK, what have you got so far (because examples #13 and #15 are not really equal)?

Besessener
12 Jul 2010, 6:39 AM
Sorry, my fault, i had to say that #15 is from another project where nearly the same works.

projext.js:


Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif';
Ext.ns('projExt');

Ext.onReady( function () {

Ext.QuickTips.init();

new Ext.Viewport({
layout:'border',
items: [
projExt.Menu,
projExt.Main
]
});

});

and index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WAK</title>

<!-- Stylesheets -->

<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" >
<link rel="stylesheet" type="text/css" href="./css/projext.css" >

<!-- ExtJS -->

<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./extjs/ext-all-debug.js"></script>

<!-- Plugins -->

<!-- Language -->

<script type="text/javascript" src="./extjs/src/locale/ext-lang-de.js"></script>

<!-- Application -->

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

<!-- Module -->

<script type="text/javascript" src="./javascript/projext.main.js"></script>
<script type="text/javascript" src="./javascript/projext.menu.js"></script>
<script type="text/javascript" src="./javascript/projext.projekte.js"></script>

</head>
<body>
</body>
</html>

Now i think that's all to know :)

Condor
12 Jul 2010, 6:48 AM
Your .js files are included in the wrong order (I assume that main uses projekte?).

Besessener
12 Jul 2010, 7:01 AM
Oh thanks, that's right.
Hmm, why it doesn't say that

projExt.ProjekteGrid is undefined?
then i had found it faster :)

Ok, now all works, thanks a lot.