Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    42
    Vote Rating
    0
    fguest is on a distinguished road

      0  

    Default [4.2][Bug] Layout 'table' not valid working in window for 'input' components

    [4.2][Bug] Layout 'table' not valid working in window for 'input' components


    Layout 'table' not valid working in window for 'input' components.

    See example. Panel in body - ok. Panel in window - bad.

    bug_input_win_2013-01-03_192557.png

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-beta/resources/css/ext-all.css"/>
      <script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-beta/ext-all-debug.js"></script>
    </head>
    
    <body>
    
    <h1>Expected: see item-3 & item-4</h1>
    
    <div id="qaz"></div>
    
    <script>
      Ext.onReady(function() {
        var cnt = 0;
        var crItem = crItem_input;
        //crItem = crItem_comp;  //!!! uncomment this line for expected layout
    
        function crItem_comp(config) {
          var cfg = Ext.apply({
            html: 'item-' + cnt++,
            style: 'border: red solid 1px'
          }, config);
          return Ext.create('Ext.Component', cfg);
        }
    
        function crItem_input(config) {
          var cfg = Ext.apply({
            value: 'item-' + cnt++
          }, config);
          return Ext.create('Ext.form.field.Text', cfg);
        }
    
        function crPanel() {
          cnt = 0;
          return Ext.create('Ext.Panel', {
            layout: {type: 'table', columns: 2},
            items: [
              crItem({width: 200}),
              crItem({width: 400}),
              crItem({}),
              crItem({width: "100%"}),
              crItem({colspan: 2, width: "100%"})
            ]
          });
        }
    
        // render panel
        var p = crPanel();
        p.render('qaz');
    
        // render panel in window
        var w = Ext.create('Ext.Window', {
          title: 'Bug: see item-3 & item-4',
          items: [
            crPanel()
          ]
        });
        w.show();
    
      });
    </script>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Aug 2009
    Posts
    42
    Vote Rating
    0
    fguest is on a distinguished road

      0  

    Default


    This temporary solutions: after render change size container...

    Code:
        w.on('render',function(){
          w.setWidth(w.getWidth());
        });