PDA

View Full Version : New to extjs: various questions



Latios88
6 May 2010, 4:05 AM
Hi.
I am to ext js and i am trying to build my first ext js application. Itīs a code snippet organizer.

First question: What is the best way to organize my js files? I am using namesapces for example CodeManager.UI, CodeManager.Data etc. My main doubts is about the UI.
Currently i have one function called buildUI() in my main application file which is responsable for building the main UI.



CodeManager.buildUI = function()
{
var snipetsAccordionTopbar =new Ext.Toolbar({
items : [
{
text : "Add Snippet",
icon : "imagens/icons/add.png",
cls : "x-btn-text-icon", handler : function() {
CodeManager.UI.addSnipetWindow();
}
},
...


This might get a litle confusing. Should i create a file for each region (i am using border layout) and them call it from
the buildUI function?
And what about windows that open when click on the toolbar to add snippet,add category etc?


Besides this design layout i am having some small problems:

1)
If i place this code in my init function it doesnīt work.
In firebug it says "b is null" at line 7 of ext-all.js


Ext.MessageBox.show({
title:' ',
msg: 'Message'
});



2) I dont want my application to take all the viewport so i created a div in index.htm and set the mainpanel renderTo that div.
But it doesnīt work.

var panelContainer = new Ext.Panel({
layout:"border",
renderTo:"layoutExt",
items: [
{region: "west",items:[snipetsAccordion],width:450,collapsible:true,title:"Your snipets",margins:{top:0, right:5, bottom:0, left:5}},
{region:"center",title : "main panel",items:[mainPanel],margins:{top:0, right:5, bottom:0, left:0}}
]
});

Same error as before.

I am using last version of extJS.

Many thanks for your help.

Mike Robinson
6 May 2010, 6:59 AM
Yes, as a matter of fact, you do want your application to live in a Viewport, and to control the entire screen. You want to use a layout to control the screen geometry. The entire screen.

Yes, you do.

Boxcopter
6 May 2010, 11:16 AM
What mike said. I usually organize my files by component. If I have a navigation panel I have a js file called "navigation" and make its namespace "ApplicationName.Comps.Navigation". The viewport is in a file I call "manager.js" which I put all the primary information. For the first time ever I only have one html page for a J2EE application and the Javascript files are the key, so I call most everything as an object and give every component a unique id that can be called from anywhere as long as you have the information to make up each id.

This might be tmi, but if you are working on a large scale project this might help you organize things a little better. Stick to easy but detailed naming conventions for your namespaces and ids.

Latios88
7 May 2010, 2:25 AM
Yes, as a matter of fact, you do want your application to live in a Viewport, and to control the entire screen. You want to use a layout to control the screen geometry. The entire screen.

Yes, you do.


This means that an extjs app always take the entire screen? So if i want to add some static html or other non extjs content i have to put it inside a panel for example?

I get the part of code organization.
I still have problems with the Ext.Msg. I dont know if itīs because the viewport hasnīt been created yet but what if i want to show a window with a login box before the main ui load?



//Init function - called on Ext.ready
CodeManager.init = function()
{
Ext.QuickTips.init();

Ext.Msg.alert("teste","tst"); //Dont work
CodeManager.buildUI();


};


//Builds the ui
CodeManager.buildUI = function()
{

//I will refactor this and put this code in the viewport object
var panelContainer = new Ext.Panel({
layout:"border",
items: [
{region: "west",items:[CodeManager.UI.SnippetsList()],width:450,collapsible:true,title:"Your snipets",margins:{top:0, right:5, bottom:0, left:5}},
{region:"center", titleCollapse: true,items:[CodeManager.UI.SnippetDetails()],margins:{top:0, right:5, bottom:0, left:0}}
]
});

new Ext.Viewport({
layout:"fit",
items:[panelContainer]
});
};