1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default How to start? Layout, View, Container, ViewPort or Window??

    How to start? Layout, View, Container, ViewPort or Window??


    Hi all,

    I'm a little bit confused and do not know how to start. If I want to create a sample project (VAT Calculator like: http://www.tusana.eu/myCalc/ )

    Do I need a Container then Window then Formpanel? Or Just formpanel on a main panel? Or just floatable window??

    Please advise, thanks!

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    Berlin
    Posts
    19
    Vote Rating
    0
    vollchraZ is on a distinguished road

      0  

    Default


    Hi aacoro,

    you can simply create a html file. Instead of the form you create an empty div element with an id like 'myForm'. After the dom is loaded you only have to create a form panel and render it to the empty div element.

    HTML:
    Code:
    <h1>My Calc</h1>
    <p>Use it or not.</p>
    <div id="myForm"></div>
    ExtJS:
    Code:
    Ext.onReady(function(){
      var myForm = Ext.create("Ext.form.FormPanel", {
        renderTo: "myForm",
        ...
      });
    });

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    thanks vollchraZ, this works for me now.

    Although I still seek for information how to use all these and WHEN do I need them! So if some one has some info, please share.

    Thanks all.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    Vote Rating
    0
    swelz is on a distinguished road

      0  

    Default


    Well, hard to tell since at least i don't fully understand what you want to do

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    I'm sorry for my poor questioning skills. What I try to ask is:

    I java you have layout managers. So before you can show something to a user you have to choose a lyout manager, and then place a panel on it and then your components like TextBox etc.

    In the Sencha documentation I saw that you have a Container, ViewPort, Window, Panel, Grid etc..
    So when should I use an Container? Should I place ALWAYS my formpanels inside an html DIV? Or is the best practise to place a Container inside a DIV and the the formpanel to the container???

    i think my biggest problem is that I have not enough examples and documenation about Container, ViewPort, Window, Panel, Grid etc..

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    A Container will simply contain child items and based on the layout config it will lay out the child items.

    Panel extend Container so a Panel will lay out it's child items just like a Container but adds more functionality. Quite a lot of times people use Panel when all they need is Container.

    Windows extend Panel so Window can do everything Panel can do but adds more functionality, basically making the Panel a popup window that can be dragged, resized, etc.

    FormPanel also extends Panel and is going to layout components in a form fashion. Also adding the ability to submit the values.

    A Viewport extends Container and basically all it adds is the ability to, out of the box, take up the entire browser viewport (100% height and 100% width).

    I mentioned the layout config, this is where you can specify which layout manager to use. Current layouts in PR5 are: Absolute, Accordion, Anchor, Auto (default if no layout config is specified), Border, Card, Column, Fit, HBox, Table, and VBox.

    If you look in the API doc and expand Ext -> layout -> container you will see these (and others that are usually not used with Containers). If you click on one, it will usually show an example. Other place is the examples that come with the download. Not all of them are there but it will give you an example on how to use them.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    Thanks, this was the explanaition I was looking for!! Thanks again!

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by aacoro View Post
    Thanks, this was the explanaition I was looking for!! Thanks again!
    Anytime!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Similar Threads

  1. [FIXED]Ext.container.ViewPort doc error when view
    By mitchellsimoens in forum Ext:Bugs
    Replies: 2
    Last Post: 5 Mar 2011, 3:07 PM
  2. Replies: 2
    Last Post: 21 Jul 2010, 12:02 AM
  3. Resize Gridpanel to fit browser window when in container layout.
    By novahokie in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Jun 2009, 9:44 PM
  4. tree view in layout window
    By Ajish in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 4 Dec 2008, 8:51 AM
  5. Window, Container, Panel, Layout
    By Troy Wolf in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 31 Oct 2007, 11:00 AM

Thread Participants: 3

Tags for this Thread