Results 1 to 3 of 3

Thread: ComboFields in Form Panel Not rendering on Intial Page Load.

  1. #1
    Sencha Premium User
    Join Date
    Apr 2010
    Posts
    238

    Default ComboFields in Form Panel Not rendering on Intial Page Load.

    Hi there,

    I have an unusual situtation, in my code I have 3 combo boxs each set up a xtype combo. I group these three combo box's into a another xtype of fieldset. then I attach the fieldset to a Form Panel, my form panel also defines a Footer Bar with a simple button. When I run the page in my browser the footer bar appears with the button but no combo boxes, now if I refresh the page simply by select F5, when the page re-renders everything is there. Very unusual I think? Further I investigated via Firebug, from what I can tell the combo boxes are infact appearing in the DOM on intial load but just does not appear. I am attaching some screen shots and will then attach my code:

    First Image show how FF display the page, and you can see FireBug indicating it is in the DOM but not rendering to the user.

    not_rendering.png

    Second image you can see FF displaying.

    rendering_.png

    Now some of my Code - this code snippted defines the 3 combo boxs.
    Code:
    var comboFields = [ 
       {
             xtype: "combo",
             fieldLabel: "Employee Name",
             forceSelection: true,
             displayField: "fullName",
             valueField: "id",
             hiddenName: "id",
             loadingText: "Querying...." ,
             minChars: 1,
             triggerAction: "all",
             store: remoteJsonStoreCombo,
             emptyText: "Start by typing first or last name of employee",
             listEmptyText: "No employees were found matching search criteria",
             selectOnFocus: true,
             pageSize: 5,
             id: "employee_combo"
       },
       {
             xtype: "combo",
             fieldLabel: "Cost Centre",
             forceSelection: true,
             displayField: "costCentreName",
             valueField: "id",
             hiddenName: "costCentreID",
             loadingText: "Querying...." ,
             minChars: 1,
             triggerAction: "all",
             store: remoteJsonStoreComboCC,
             emptyText: "Start by typing cost centre name or code",
             listEmptyText: "No cost centres were found matching search criteria",
             selectOnFocus: true,
             pageSize: 5,
             id: "cost_centre_combo"
        },
       {
             xtype: "combo",
             fieldLabel: "Attendance Type",
             forceSelection: true,
             displayField: "timeCodeName",
             valueField: "id",
             hiddenName: "timeCodeID",
             loadingText: "Querying...." ,
             minChars: 1,
             triggerAction: "all",
             store: remoteJsonStoreComboTC,
             emptyText: "Start by attendance description or code",
             listEmptyText: "No attendance types found matching search criteria",
             selectOnFocus: true,
             pageSize: 5,
             id: "attendance_type_combo"
       }]
    this code defines my fieldset:

    Code:
    var fieldset1 = {
     xtype:  "fieldset",
     border: false,
     labelWidth: 175,
     defaults: {width: 300},
     defaultType: "textfield", 
     items: comboFields
    };
    And this code defines my panel
    Code:
    var myformPanel = new Ext.FormPanel (
        {
          height: 90,  
          width: 900,
          cls: "panel_padding",
          title: "Search Attendance Details",
          collapsible: true,
          titleCollapse: true,
          frame: true,
          id: "searchPanel",
          items: [fieldset1],
          fbar: [button_type_search],
          buttonAlign: "center"
        });
    
    myformPanel.render("div_search_container_001");
    Furthermore: I tried executing but no joy.
    myformPanel.show();
    Ext.getCmp("searchPanel").doLayout();


    Any help very much appreciated.

    Darragh

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The fieldset needs to be autoHeight:true.

  3. #3
    Sencha Premium User
    Join Date
    Apr 2010
    Posts
    238

    Default

    thanks Conor, I also needed to remove the "height: 90" from my Form Panel.

    Darragh

Similar Threads

  1. Rendering after beforerender has cancelled the intial render call
    By niaz in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Oct 2009, 6:17 AM
  2. How to use element/panel.load() to load parts of a page
    By mabra in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Jul 2009, 10:29 AM
  3. How to load a page into a Ext.Panel ?
    By rvillane in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 2 Oct 2008, 6:51 AM
  4. Form/Form Elements Render differntly each time i load a page
    By ruggerboy in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 27 Jun 2008, 2:37 AM
  5. How to load a page in panel
    By karim480 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 28 Apr 2008, 12:24 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •