1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Answers
    1
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default Unanswered: form.Panel renderTo issue

    Unanswered: form.Panel renderTo issue


    Hi guys,

    I have really simple problem, but I have no idea how to fix it. I am developing app with extjs 3 since coupe of months but I am new in ExtJs 4 and I dont know what I am doing wrong

    I have this very simple form.Panel :

    HTML Code:
    <script type="text/javascript">
        
        Ext.create('Ext.form.Panel', {
           renderTo: 'contact_form',
           title: 'Contact form',
           height: 300,
           width: 600,
           defaultType: 'textfield',
           items: [
               {
                   fieldLabel: 'email',
                   name: 'email'
               },
               {
                   fieldLabel: 'subject',
                   name: 'subject'
               },
               {
                   fieldLabel: 'message',
                   xtype: 'textarea',
                   name: 'message'
               }
           ]
        });
        
    </script>
    
    <div id="contact_form"></div>
    And after rendering the view with this script I am getting only very small squere - I suppose its the panel header. Nothing else.

    What am I doing wrong ? (in the firebug the panel body has no width and height set to 0)

    And one more thing, is there autoHeight property for Panel ? cause in docs there is no such a thing

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Answers
    1
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default


    Is it necessary to have any viewport or :

    Code:
    Ext.application({
            launch: function() {
    
           }
    });
    function.

    Right?

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Answers
    3549
    Vote Rating
    850
    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


    MVC is optional... suggested but optional. Most of the examples are using renderTo so it's working without a hitch. Also, autoHeight is no longer needed, if the component is not a child of another component that manages height or if you haven't specified a height... autoHeight is assumed.
    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.

  4. #4
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Answers
    1
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default


    Guys, I have no idea why there is such an issue

    Can anybody help me debug it ?

    The link to the site is here

    http://scriptdealer.pl

    When u click contact in menu, the contact view is rendering to the div id=leftcolumn, and there is extjs form panel

    And as u can see, it is only a small rectangle,
    I need the view to render to the leftcolumn of the site (which is the main or center column of the site under the carousel)

    Can anybody go into a source or firebug (maybe css) and help me with it ?

    I am trying to solve it from 2 days and nothing.....

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Answers
    1
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default


    Maybe this code will be also helpfull :

    Code:
    $.ajax({
            url: App.baseUrl+'/'+action[0]+'/index',
            type: "POST",
            data: "format=html",
            success: function(html) {
                           $("#leftcolumn").fadeOut(300, function(){
                                      $("#leftcolumn").empty();
                                      $("#leftcolumn").append(html);
                                      $("#leftcolumn").fadeIn(300);
                           })
           }
    });
    This is the way I am loading the view (which is shown in the first post) with the jQuery

    Maybe something is wrong with this ?

  6. #6
    Sencha User
    Join Date
    Dec 2009
    Posts
    95
    Answers
    1
    Vote Rating
    0
    Wolfie is on a distinguished road

      0  

    Default


    I did some further investigation :

    So, when the function of the jquery is without fadeOut then everything is going correct but unfortunately without fadingIn and fadingOut

    Code:
    $.ajax({
            url: App.baseUrl+'/'+action[0]+'/index',
            type: "POST",
            data: "format=html",
            success: function(html) {
                                               
                          $("#leftcolumn").empty();
                          $("#leftcolumn").append(html);
                          $("#leftcolumn").fadeIn(300);
                                               
             }
     });
    Any idea how to handle with it to have fadeIn fadeOut effect ?

Thread Participants: 1