Results 1 to 7 of 7

Thread: [CLOSED] ItemSelector in a TabPanel with deferredRender = false

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [CLOSED] ItemSelector in a TabPanel with deferredRender = false

    ExtJS 3.2.0

    I have an ItemSelector in a tab of a TabPanel. This tab is not visible per default. I have to set deferredRender = false because my TabPanel is a from and needs to be loaded and saved.

    The ItemSelector seems to be rendered wrong in this case. See the example:

    - there is no vertical scrollbar although there are invisible items
    - the bottom border is not there (it is there if the deferredRender = true)

    Create the example file with the code below. Name it hello3.html and place it to 'examples\window\'

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Hello World Window Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <script type="text/javascript" src="../ux/MultiSelect.js"></script>
        <script type="text/javascript" src="../ux/ItemSelector.js"></script>
        
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <script>
    var groups = [
    
    [ '3', 'Registered users' ],
    [ '16', '22223' ],
    [ '12', '2223332' ],
    [ '17', '2233332' ],
    [ '13', '32322' ],
    [ '15', '33222' ],
    [ '18', '333' ],
    [ '19', '333222' ],
    [ '14', '33332222' ],
    [ '20', '44444' ],
    [ '21', '55555' ],
    [ '11', '5565656' ],
    [ '22', '7776656' ],
    [ '23', '7777' ],
    [ '28', '999999' ],
    [ '31', '9994444444999' ],
    [ '24', '888' ],
    [ '5', 'Dealers' ],
    [ '6', 'Managers' ],
    [ '4', 'Partners' ]];
    
    function show_properties()
    {
      var restriction_selector = new Ext.ux.form.ItemSelector({
        xtype: 'itemselector',
        name: 'groups',
        imagePath: '../ux/images/',
        width: 580,
    
        drawUpIcon:false,
        drawDownIcon:false,
        drawTopIcon:false,
        drawBotIcon:false,
    
        multiselects: [
          {
            width: 280,
            height: 220,
            draggable: false,
            droppable: false,
            style: 'background-color: white',
            store: groups,
            displayField: 'text',
            valueField: 'value'
          },{
            width: 280,
            height: 220,
            draggable: false,
            droppable: false,
            style: 'background-color: white',
            store: new Ext.data.ArrayStore({ data: [], fields: ['value','text'] }),
            displayField: 'text',
            valueField: 'value'
          }
        ]
      });
      
      properties_form = new Ext.FormPanel({
        border: false,
        layout: 'fit',
        trackResetOnLoad: true,
        
        items: current_tab_control = new Ext.TabPanel({
          activeTab: 0,
          width: 600,
          height: 250,
          plain: false,
          border: false,
          enableTabScroll:true,
          animScroll: false,
          deferredRender: false,
          defaults:{autoScroll: true},
          items:[
            {
              id: 'properties_common',
              title: 'Common properties',
              cls: 'x-border-layout-ct',
              bodyStyle: 'background-color: transparent',
              items: [
                {
                  frame: true,
                  collapsible: false,
                  layout:'form',
                  bodyStyle: 'background-color: transparent',
                  style: 'margin: 5px 5px 5px 5px',
                  width: 600,
    
                  defaults: { anchor: '0' },
                  labelWidth: 168,
                  defaultType: 'textfield',
                  items: [
                    {
                      fieldLabel: 'Internal name*',
                      id: 'object_iname',
                      name: 'object_iname'
                    },
                    new Ext.form.DateField({
                        fieldLabel: 'Expiration date',
                        qtip: 'date format: 2007-02-28',
                        format: 'Y-m-d',
                        id: 'expire_date',
                        name: 'expire_date'
                    })
                  ]
                }
              ]          
            },
            {
              id: 'properties_restrictions',
              title: 'Access restrictions',
              cls: 'x-border-layout-ct',
              bodyStyle: 'background-color: transparent',
              items: [
                {
                  frame: true,
                  collapsible: false,
                  layout:'form',
                  style: 'margin: 5px 5px 5px 5px',
                  width: 592,
    
                  hideLabels: true,
                  items: restriction_selector
                }
              ]  
            }
          ]
        })
      });
    
      properties_window = new Ext.Window({
    
        title: 'Object',
    
        width: 700,
        height: 494,
    
        closeAction: 'close',
        plain: true,
        modal: true,
    
        //maximized: true,
        maximizable: false,
        minimizable: false,
        resizable: false,
    
        layout: 'fit',
        items: properties_form,
    
        buttons: [
          {
            text: 'Close',
            icon: 'images/icons/close.png',
            handler: function(){ properties_window.close(); }
          }
        ]
      });
    
      properties_window.show();
    } // show_properties
    //-------------------------------------------------------------------------
    
    Ext.onReady(function(){
        var win;
        var button = Ext.get('show-btn');
    
        button.on('click', function(){
          show_properties();
        });
    });
    </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    
    <input type="button" id="show-btn" value="Show Window" />
    
    </body>
    </html>

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Have you tried layoutOnTabChange: true? Since you are rendering to a hidden panel, you will need to layout again when it is shown.

  3. #3

    Default

    layoutOnTabChange has helped. Thank you. Then, it is not a bug. Maybe, it makes sense to move the topic to the Ext:Help

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    16

    Default

    Hi Jamie,

    I am having similar issue with card layout, panel with ItemSelector is not active by default, I am using radioGroup to switch beetween two panels in card layout. I tried to use layoutOnCardChange=true it doesn't help. It kind works in IE but rendered wrong and not showing in FireFox.

    If I switch order of active panels panel with ItemSelector will look OK, however I need it to be not shown by default.

    Any idea what else I could try to fix it?

    Irene

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

    Default

    Did you make the hidden card hideMode:'offsets'?

  6. #6
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    16

    Default

    Thanks, it is work

    Irene

  7. #7
    Sencha User
    Join Date
    Aug 2009
    Posts
    9

    Default Additional possibility to fix the problem

    layoutOnTabChange and hideMode weren't working in my application.

    setting a with to itemselector solved the problem in my case:
    Code:
    xtype: 'itemselector',
    width: 550,
    ...
    multiselects: [{
        width: 250,
        ...
    },{
        width: 250,
        ...
    }]

Similar Threads

  1. Replies: 3
    Last Post: 23 Jul 2010, 6:19 AM
  2. Replies: 4
    Last Post: 19 Mar 2009, 5:53 PM
  3. deferredRender:false in tabpanel failed resizing with IE , BUG ?
    By stevanovich in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 20 Nov 2008, 2:55 PM

Posting Permissions

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