1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default [semi solved] Best practice - Loading different content in div

    [semi solved] Best practice - Loading different content in div


    I'm really enjoying using Ext for the first time.

    I am using Ext for a small cms. I am using the layout component(eg. west, north, east..etc)

    North:
    Header

    West:
    I have a vertical navigation placed here. The navigation will have three items (home, list, create).

    Center:
    Here is where I need your suggestions. This area will be the container for the three pages that represent the three navigation items. So clicking home would display "home" page, clicking list would display "list" page that has a grid...You get the idea!

    Now, what is the best tried&tested method for displaying the content within the Center panel for each click on the navigation?

    Do I put three different div's inside the Center div, load content within all, then hide/show the divs depending on the current page?

    or

    Do I load a html/php page inside the div for every nav item click?

    or

    How would you do it?

    Here is what I have so far:
    http://www.greenroom-digital.com/sony/test_cms/html/

    user: admin
    pass: admin

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    anyone?

  3. #3
    Ext User dotnetCarpenter's Avatar
    Join Date
    Mar 2007
    Location
    Copenhagen, Denmark
    Posts
    271
    Vote Rating
    0
    dotnetCarpenter is on a distinguished road

      0  

    Default


    It really depends what you want to do. I prefer the AJAH approach but you could just as well use an iFrame.

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    Thanks for the reply dotnetCarpenter.

    Ext is new to me. I'm loving it so far and want to use it more. My daily job is flash actionscripting and php work. I really want to get into the whole web 2.0 application developemnt and by saying that, I mean ajax based applications. When I first saw the demos here, I had to try it out.

    As you can see from the url I gave, the app im building is going well so far, i think

    Now I've got to the stage where I need to build the container area for the pages in the middle, or as we all know to be the center div from the Layout module.

    I want to avoid using the IFrame approach. You mention AJAH. How is that implemented?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,913
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    When you load a content panel, you can give it a URL. This url should only return a dom fragment, which will be inserted into the content panel as an HTML block.

    Check out the feed viewer example.

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    what do you mean by saying :

    This url should only return a dom fragment
    ?

    And how do I give it a url?

    Thanks

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,503
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What evant means is that what is sent back from the server in response to an Ajax request (It will have the HTTP header "X-Requested-With:XMLHttpRequest") should not be a full, valid HTML document.

    Rather it should be a fragment of HTML designed to slot into an existing page with existing javascript widgets with which it must cooperate.

    There is no need for <html><head><body> etc. No need to do Ext.onReady in embedded scripts. Really, it should use your singleton application controller to request the services it needs.

  8. #8
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    Thanks Animal