Results 1 to 4 of 4

Thread: [OPEN-805] ItemSelector not rendered tabpanel when tabpanel.deferredRender=false

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User
    Join Date
    May 2008
    Location
    United Kingdom
    Posts
    10

    Default [OPEN-805] ItemSelector not rendered tabpanel when tabpanel.deferredRender=false

    Ext version tested:
    • Ext 3.1.1
    Adapter used:
    • ext
    css used:
    • only default ext-all.css


    Browser versions tested against:
    • IE8
    • FF3.6 (firebug 1.5.3 installed)
    Operating System:
    • WinXP Pro
    Description:
    • ItemSelector does not display on a form tab when tabpanel.deferredRender=false. It displays fine when tabpanel.deferredRender=true but values not submitted by form it tab isn't activated.
    Test Case:
    Code:
     
    Ext.onReady(function(){
        Ext.QuickTips.init();
        var SERVER_ROOT='/someprocessor.php';
     
        var win = new Ext.Window({
                bodyBorder:false,
                bodyStyle:'padding: 1px 1px 1px 1px;',
                border:false,
                closeAction:'close',
                closeable:true,
                collapsible:false,
                constrain:false,
                height:375,
                hideBorders:true,
                iconCls:'ux-btn-window',
                id:'win_ui.extjs.tools.acl.profile',
                items:[
          new Ext.form.FormPanel({
      doSubmit:function(ignoreValidation){
       var params={};
       params.clientValidation=(ignoreValidation?false:true);
       this.getForm().doAction('submit',params);
      },
      autoHeight:true,
      autoScroll:false,
      autoWidth:true,
      baseParams:{_formpage:1},
      bodyStyle:'padding: 5px 5px 5px 5px;',
      border:true,
      buttonAlign:'right',
      buttons:[
         {
         buttonid:'_w77',handler:function(b,e){ Ext.getCmp('ui.extjs.tools.acl.profile').quit();},processor:'ui.modules.system.acl.profiles',text:'Cancel',tooltip:{title:'Cancel',text:''},xtype:'button'
         },
         {
            buttonid:'_w78',disabled:true,formBind:true,handler:function(b,e){Ext.getCmp('ui.extjs.tools.acl.profile').doSubmit();},processor:'ui.modules.system.acl.profiles',text:'Save',tooltip:{title:'Save',text:''},xtype:'button'
         }
      ],
      closable:true,
      collapsible:false,
      defaults:{validateOnBlur:false,allowBlank:false,msgTarget:'side'},
      forceLayout:true,
      frame:true,
      id:'ui.extjs.tools.acl.profile',
      isCacheExt:true,
      isFormPanel:true,
      items:[
         {
            activeTab:0,
            autoDestroy:true,
            autoScroll:false,
            border:true,
            closable:false,
            collapsible:false,
            defaults:{autoHeight:true,bodyStyle:'padding:5px'},
     
            deferredRender:true,
     
            enableTabScroll:false,
            forceLayout:true,
            frame:false,
            header:true,
            height:282,
            id:'_w74',
            isCacheExt:true,
            isFormPanel:false,
            items:[
        {
           autoHeight:true,
           autoScroll:false,
           border:false,
           closable:false,
           collapsible:false,
           forceLayout:true,
           frame:false,
           id:'_w75',
           isCacheExt:true,
           isFormPanel:true,
           items:[
              {
          allowBlank:true,
          fieldLabel:'Name',
          isFormField:true,
          maxLength:50,
          name:'name',
          readOnly:false,
          value:'Test',
          width:250,
          xtype:'textfield'
              },
              {
          allowBlank:true,
          fieldLabel:'Description',
          height:175,
          isFormField:true,
          maxLength:256,
          name:'description',
          readOnly:false,
          value:'Test new profile',
          width:300,
          xtype:'textarea'
              },
              {
          allowBlank:true,
          checked:false,
          fieldLabel:'Issystem',
          isFormField:true,
          name:'issystem',
          readOnly:false,
          width:30,
          xtype:'checkbox'
              }
           ],
           layout:'form',
           myLoaded:true,
           padding:5,
           processor:'ui.modules.system.acl.profiles',
           title:'Identification',
           tooltip:'Identification',
           xtype:'panel'
        },
        {
           autoHeight:true,
           autoScroll:false,
           border:false,
           closable:false,
           collapsible:false,
           forceLayout:true,
           frame:false,
           id:'_w76',
           isCacheExt:true,
           isFormPanel:true,
           items:[
              {
          xtype:'itemselector',
          name:'users',
          fieldLabel:'Users',
          imagePath:'../apps/resources/images',
          multiselects:[
             {
         width:150,
         height:150,
         store:new Ext.data.ArrayStore({
            fields:['id','username'],
            sortInfo:{field:'username',direction:'ASC'},
            data:[['1','fred']]
         }),
         displayField:'username',
         valueField:'id'
             },
             {
         width:150,
         height:150,
         store:new Ext.data.ArrayStore({
            fields:['id','username'],
            sortInfo:{field:'username',direction:'ASC'},
            data:[['5','gary'],['6','stuart']]
         }),
         displayField:'username',
         valueField:'id'
             }
          ]
              }
           ],
           layout:'form',
           myLoaded:true,
           padding:5,
           processor:'ui.modules.system.acl.profiles',
           title:'Users',
           tooltip:'Users',
           xtype:'panel'
        }
            ],
            layoutOnTabChange:true,
            minTabWidth:50,
            myLoaded:true,
            padding:0,
            plain:true,
            plugins:new Ext.ux.TabCloseMenu(),
            processor:'ui.modules.system.acl.profiles',
            resizeTabs:false,
            xtype:'tabpanel'
         }
      ],
      labelAlign:'right',
      layout:'fit',
      method:'post',
      monitorValid:true,
      myLoaded:true,
      oid:24,
      padding:0,
      plain:true,
      processor:'ui.modules.system.acl.profiles',
      readonly:false,
      singleUse:false,
      uiclass:'ui.extjs.tools.acl.profile',
      url:SERVER_ROOT,
      xtype:'form',
      baseParams:{_processor:'ui.modules.system.acl.profiles',_oid:'24',_widget:'form',_object:'ui.extjs.tools.acl.profile',_event:'load',_widgetid:'ui.extjs.tools.acl.profile',_singleUse:'0',_formpage:'1'}
          })
       ],
       layout:'fit',
              maximizable:true,
              minHeight:100,
              minWidth:100,
              minimizable:true,
              modal:false,
              plain:false,
              processor:'ui.modules.system.acl.profiles',
              style:{marginLeft:'0px'},
              title:'Test',
              width:600,
              xtype:'window'
           });
     
     
    win.show();    
     
    });

    Steps to reproduce the problem:
    • toggle tabpanel.deferredRender and view form submission
    The result that was expected:
    • ItemSelector displayed and values submitted.
    The result that occurs instead:
    • tabpanel.deferredRender=false - values submitted but ItemSelector not rendered
    • tabpanel.deferredRender=true - values not submitted if tab not activated


    Debugging already done:
    • none
    Possible fix:
    • ?

  2. #2
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    I encountered this yesterday.

    The workaround is to set a width for the itemselector proper.

    Code:
          xtype:'itemselector',
          width: 350,
          name:'users',
          fieldLabel:'Users',
          imagePath:'../apps/resources/images',
          multiselects:[
             {
         width:150,
         height:150,
    350 should be enough for your 2x 150-wide multiselects and the buttons in between.

  3. #3
    Sencha Premium User
    Join Date
    May 2008
    Location
    United Kingdom
    Posts
    10

    Default

    Hi m,

    Many thanks for your prompt reply.

    I've added the overall width as suggested and it works a treat.

    Excellent !

  4. #4

    Thumbs up

    Perfectly fits to my needs.

    Thanks a lot

Posting Permissions

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