Ext 2.0 Gui Designer

[sierk]

Hi guys,

I understood from sorted mails here in the forum that is it possible to use the FormPanel
in such a way that it arranges the fields and their lables in two or three columns while still
occasionally having some elements which span more than one column.

Very much like a html table would behave.

Sort of what this guy has at the bottom of his blog entry:
http://www.danvega.org/blog/index.cf...ms-Using-cfExt

How can I build a form like this with GuiDesigner ?

Sorry to ask, but again this is not obvious when looking at the Designer.

petri.

Just drop a tablelayout from layout section on your panel. Set number of columns and if a column should span more then one column set rowspan as property.

Sierk

[sierk]

Hi (again),

tried to use the accordion and dropped one into a column of my three column layout.
Works fine...
... except that i can't get it to fill the container area, like the accordion in Desktop sample does.

any ideas ?

Petri.

Did you set the layout to fit ?

[sierk]

Thanks for help Sierk.

So i started to experiment and design my Dojo app port.
After few hours of goofing it was coming together quite nicely, expect that i don't quite understand the mechanics of creating a toolbar in the GuiDesigner.
I understand that I can add an array atrribute called tbar and have the buttons live there.
but in what format ? what exactly do i type in the editbox ?

I'm sure that sooner or later I will figure it out.
But having your docs finished (or few screencams ) will fix all these types of worries.

Sierk should nor spend his time answering questions here, he should be writing the docs.
Anyone else care to explain the toolbar format for me ?

Petri.

The tbar of the designer looks something like this.

tbar    : [{
              text : 'Save',
              tooltip : 'Save the design file',
              iconCls:'icon-save',
              disabled : true,
              id : this.FBSaveBtn,
              handler: function() {this.saveConfig},
            },{
              text : 'Reload',
              iconCls:'icon-reload',
              tooltip : 'Reload the design file',
              handler: function (){
                this.markUndo("Reload");
                this.loadConfig();
                Ext.getCmp(this.FBSaveBtn).disable();
              }
            }] 

[psavolai]

Did you set the layout to fit ?

Which layout, the panels ?, accordionpanels ?
I tried both , to no avail.

Are you saying that if you take a new panel, drop an accordion onto it
your accordion will fill the content area ?

since mine doesn't and I cant make it do so no matter what I try .

Petri.

[sierk]

Which layout, the panels ?, accordionpanels ?
I tried both , to no avail.

Are you saying that if you take a new panel, drop an accordion onto it
your accordion will fill the content area ?

since mine doesn't and I cant make it do so no matter what I try .

Petri.

Perti,

Send me a private message, with the json you currently created and a good description what you want to do and i will see if i can make some kind of demo for you.

Sierk

[psavolai]

Perti,

Send me a private message, with the json you currently created and a good description what you want to do and i will see if i can make some kind of demo for you.

Sierk

Funny thing.
I finally gave up and started from other direction.
I took the "complex layout"-example and started modifying the code and voila, the accordion works exactly as it is supposed to.
So there is big difference if the ui is created purely with code or from json.

For some reason I cannot achieve the same behaviour with GuiDesigner.
So I'll go with what works.

You should maybe not waste your time on this, except if you really want to know
how the tool Generated code behaves differently from the one that is in "complex layout".

thanks,

Petri.

[sierk]

Funny thing.
I finally gave up and started from other direction.
I took the "complex layout"-example and started modifying the code and voila, the accordion works exactly as it is supposed to.
So there is big difference if the ui is created purely with code or from json.

For some reason I cannot achieve the same behaviour with GuiDesigner.
So I'll go with what works.

You should maybe not waste your time on this, except if you really want to know
how the tool Generated code behaves differently from the one that is in "complex layout".

thanks,

Petri.

Still I would like to know what is the problem, so i would like to get the code so I can see how to make it work in the designer. Because also complex layouts should be easy to create.

Sierk

[psavolai]

Still I would like to know what is the problem, so i would like to get the code so I can see how to make it work in the designer. Because also complex layouts should be easy to create.

Sierk

So this is a clip which shows how the accordion wont fill the container area:
http://www.wainotar.com/siirto/accordion.wmv

I've tried all sorts of thinkable and unthinkable attributes and no result, until I started creating accordion by code like in the Complex-example.

here's a very short clip of the structure that I'm trying to achive: (this is the dojo version)
http://www.wainotar.com/siirto/jesblack.wmv

petri.

[sierk]

So this is a clip which shows how the accordion wont fill the container area:
http://www.wainotar.com/siirto/accordion.wmv

I've tried all sorts of thinkable and unthinkable attributes and no result, until I started creating accordion by code like in the Complex-example.

here's a very short clip of the structure that I'm trying to achive: (this is the dojo version)
http://www.wainotar.com/siirto/jesblack.wmv

petri.

Thanks for your video. It made the problem clear i made a JSON that shows that it works, but you have to remove property autoHeight. This causes your problem. In next release we added this option to wizard

Sierk

And then use the following JSON to see that it works:

{
layout:"accordion",
xtype:"panel",
title:"Accordion",
defaults:/*BEGIN*/{html: '<empty panel>', bodyStyle:'padding-top:20px; text-align:center;font-style:italic;color: gray;font-size:11px;'}/*END*/,
items:[{
    title:"Panel 1"
  },{
    title:"Panel 2"
  },{
    title:"Panel 3"
  },{
    title:"Panel 4"
  }],
window:{
  height:500
}
} 

[psavolai]

It works.
thank you very much Sierk.

I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
... needles to say that I found none.

I have two basic use cases:

1. At application init create needed panels and such.
" this is easy, just copy the generated code json literally to the constructor call ".
... and assignt it to what ?
... and what if I'd rather have the json files in separate files, how would I suck them in ?
... which portion of files (just the items, or all of it ?)

2. Dynamically, after a click on a button, load some form and display it on the ui
- simple setup :
two panels on borderlayout, first one having two buttons and the other panel, well, just lying there , empty.
- user clicks on first button: load the contents of "panel1.json" in the place of the original panel2
- user clicks on button two: load the contents of "panelx.json" in the place of original panel2


To me these use cases represent the basics of form handling in web applications.
Sorry for being a little thick, but I just can't get a clear picture from the docs that are available.

If you describe the steps to me (or even better, show me a working example) I will promise to make screencams out of the solutions and post them for future generations .

Petri.