1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Vote Rating
    6
    jkyoutsey is on a distinguished road

      1  

    Question Window layout difference between 4.1.1 and 4.2

    Window layout difference between 4.1.1 and 4.2


    I moved to 4.2 and this dialog no longer lays out correctly. The highlighted area under 4.1.1 would dynamically resize itself to hold whatever contents were set for it's innerHtml (later in the lifecycle). Under 4.2 the container is not tall enough to contain even one line of text and will not resize even when the dialog is resized. What am I missing?
    layout.png

    Code:
    Ext.define('my.view.Dialog', {      extend : 'Ext.Window',
          alias : 'widget.Dialog',
          modal : true,
          layout : 'fit',
          width : 650,
          closable : true,
          title : l10n.Dialog.title,
          buttons : [{
                text : l10n.Dialog.closeButton,
                handler : function() {
                   this.up('window').close();
                }
             }],
    
    
          initComponent : function() {
             var loc = l10n.Dialog;
             var table = Ext.create(Ext.panel.Panel, {
                   name : 'testsTable',
                   id : 'testsTable',
                   border : false,
                   layout : {
                      type : 'table',
                      columns : 3,
                      tableAttrs : {
                         style : {
                            width : '100%',
                            height : '100%'
                         }
                      }
                   },
                   defaults : {
                      border : false
                   },
                   items : [{
                         html : loc.testsTableTestNameColumnHeader,
                         cls : 'testTableColumnHeader'
                      }, {
                         html : loc.testsTableExpectedValueColumnHeader,
                         cls : 'testTableColumnHeader'
                      }, {
                         html : loc.testsTableFoundValueColumnHeader,
                         cls : 'testTableColumnHeader'
                      }]
                });
             this.items = [{
                   xtype : 'panel',
                   bodyPadding : '10, 0, 5, 10',
                   layout : {
                      type : 'vbox',
                      align : 'stretch',
                      defaultMargins : '0, 10, 5, 0'
                   },
                   items : [{
                         xtype : 'container',
                         layout : {
                            type : 'hbox',
                            align : 'stretch'
                         },
                         items : [{
                               xtype : 'label',
                               text : loc.standardName,
                               cls : 'formLabel',
                               flex : 1
                            }, {
                               xtype : 'label',
                               id : 'standardNameLabel',
                               flex : 6
                            }]
                      }, {
                         xtype : 'container',
                         layout : {
                            type : 'hbox',
                            align : 'stretch'
                         },
                         items : [{
                               xtype : 'label',
                               text : loc.ruleName,
                               cls : 'formLabel',
                               flex : 1
                            }, {
                               xtype : 'label',
                               id : 'ruleNameLabel',
                               flex : 6
                            }]
                      }, {
                         xtype : 'container',
                         layout : {
                            type : 'hbox',
                            align : 'stretch'
                         },
                         items : [{
                               xtype : 'label',
                               text : loc.severity,
                               cls : 'formLabel',
                               flex : 1
                            }, {
                               xtype : 'label',
                               id : 'severityLabel',
                               flex : 6
                            }]
                      }, { // THIS IS THE CONTAINER THAT WON'T RESIZE
                         xtype : 'container',
                         layout : {
                            align : 'stretch'
                         },
                         id : 'fixTextLabel',
                         margins : '5 10 5 0'
                      }, 
                      table]
                }];
    
    
             this.table = table;
             this.callParent(arguments);
          },
    
    
          loading : true,
          
          onEntityChange : function() {
             if (this.loading) {
                this.loading = false;
                return;
             }
             this.close();
          },
          
          onRefresh : function() {
             this.close();
          },
          
          setData : function(data) {
             if (!data) {
                return;
             }
    
    
             Ext.getElementById('standardNameLabel').innerHTML = data.get('standardName');
             Ext.getElementById('ruleNameLabel').innerHTML = data.get('ruleName');
             Ext.getElementById('severityLabel').innerHTML = data.get('severity');
    
    // THIS IS WHERE THE CONTENTS OF THE CONTAINER ARE SET
             Ext.getElementById('fixTextLabel').innerHTML = data.raw.attributes.getNamedItem('fixtext').value;
             
             this.parseXml(data.raw);
             this.setIcon('/js/images/' + ((data.get('result') == 'pass') ? 'pass' : 'fail') + '.png');
          },
    
    
          parseXml : function(xml) {
             var table = this.table;
             // jquery
             $(xml).find('test-result').each(function() {
                   var found = $(this).attr('value');
                   if (!found || found.length == 0) {
                      found = l10n.Dialog.noValueFound;
                   }
                   table.add({
                         html : $(this).attr('comment'),
                         cls : 'testTableCell'
                      });
                   table.add({
                         html : $(this).attr('expected_value'),
                         cls : 'testTableCell'
                      });
                   table.add({
                         html : found,
                         cls : 'testTableCell'
                      });
                });
             this.doLayout();
          }
       });

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    -1
    asti can only hope to improve

      -1  

    Default


    Any new information on this issue?

    I have also a problem with resizing a window (4.2 GA) (fit layout) and the inner Panel doesn't resize with it. It worked with ext 4.2.0.265. I'm trying to simplify my app to show a testcase. Simple tests seems to work. In my case no scrollbars appears as i would expect ( autoScroll: true in inner panel)

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    -1
    asti can only hope to improve

      -1  

    Default


    Code:
    Ext.application({
        name: 't1',
        launch : function() {
          var win1, win2, pan1, pan2;
    
          var drawComponent1 = Ext.create('Ext.draw.Component', {
            viewBox: false,
            width: 400,
            height: 300,
            items: [{
              type: 'circle',
              fill: '#79BB3F',
              radius: 100,
              x: 100,
              y: 100
            }]
          });
    
          var drawComponent2 = Ext.create('Ext.draw.Component', {
            viewBox: false,
            width: 400,
            height: 300,
            items: [{
              type: 'circle',
              fill: '#79BB3F',
              radius: 100,
              x: 100,
              y: 100
            }]
          });
    
          pan1 = Ext.create('Ext.panel.Panel', {
            layout: 'absolute',
            autoScroll: true,
            items: [drawComponent1]
          });
    
          pan2 = Ext.create('Ext.panel.Panel', {
            layout: 'absolute',
            autoScroll: true,
            items: [drawComponent2]
          });
    
          win1 = Ext.create('Ext.window.Window', {
            title: "Scroll and Resize dont work",
            layout: 'fit',
            x: 10,
            y: 10,
            width:300,
            height: 200,
          });
     
          win2 = Ext.create('Ext.window.Window', {
            title: "Scroll and Resize works",
            layout: 'fit',
            x: 450,
            y: 10,
            width: 300,
            height: 200,
            items:[pan2] // declarative added
          });
    
          win2.show();
    
          win1.items.add(pan1); //dynamically added
          win1.show();
        }
    });


    Start in browser and resize both windows.

    This testcase shows that there is a difference between dynamic added items and declarative added items.

    What can i do. In my application most items are dynamically added?resizetest.png

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    -1
    asti can only hope to improve

      0  

    Default


    Ok. Found my problem:
    I have tou use
    win1.add(pan1)
    and not
    win1.items.add(pan1)

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Vote Rating
    6
    jkyoutsey is on a distinguished road

      0  

    Exclamation Still no answer...

    Still no answer...


    asti hijacked my thread...

    I still need to understand why this doesn't size appropriately.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Vote Rating
    6
    jkyoutsey is on a distinguished road

      0  

    Default


    I added this to a jsFiddle (http://jsfiddle.net/jkyoutsey/vGhNL/) but it doesn't seem to render right there at all. But this code should show this issue clearly stand alone:
    Code:
    Ext.define('my.view.Dialog', {
        extend: 'Ext.Window',
        alias: 'widget.Dialog',
        modal: true,
        layout: 'fit',
        width: 650,
        closable: true,
        title: 'test',
        buttons: [{
            text: 'close',
            handler: function () {
                this.up('window').close();
            }
        }],
    
    
    
    
        initComponent: function () {
            var table = Ext.create(Ext.panel.Panel, {
                name: 'testsTable',
                id: 'testsTable',
                border: false,
                layout: {
                    type: 'table',
                    columns: 3,
                    tableAttrs: {
                        style: {
                            width: '100%',
                            height: '100%'
                        }
                    }
                },
                defaults: {
                    border: false
                },
                items: [{
                    html: 'name',
                    cls: 'testTableColumnHeader'
                }, {
                    html: 'expected',
                    cls: 'testTableColumnHeader'
                }, {
                    html: 'found',
                    cls: 'testTableColumnHeader'
                }]
            });
            this.items = [{
                xtype: 'panel',
                bodyPadding: '10, 0, 5, 10',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    defaultMargins: '0, 10, 5, 0'
                },
                items: [{
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'label',
                        text: 'Name',
                        cls: 'formLabel',
                        flex: 1
                    }, {
                        xtype: 'label',
                        id: 'nameLabel',
                        flex: 6
                    }]
                }, {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'label',
                        text: 'Rule',
                        cls: 'formLabel',
                        flex: 1
                    }, {
                        xtype: 'label',
                        id: 'ruleLabel',
                        flex: 6
                    }]
                }, {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'label',
                        text: 'Severity',
                        cls: 'formLabel',
                        flex: 1
                    }, {
                        xtype: 'label',
                        id: 'severityLabel',
                        flex: 6
                    }]
                }, { // THIS IS THE CONTAINER THAT WON'T RESIZE
                    xtype: 'container',
                    layout: {
                        align: 'stretch'
                    },
                    id: 'fixTextLabel',
                    margins: '5 10 5 0'
                },
                table]
            }];
    
    
            this.table = table;
            this.callParent(arguments);
        },
    
    
        setData: function (data, tests) {
            if (!data || !tests) {
                return;
            }
    
    
            Ext.getElementById('nameLabel').innerHTML = data.get('standardName');
            Ext.getElementById('ruleLabel').innerHTML = data.get('ruleName');
            Ext.getElementById('severityLabel').innerHTML = data.get('severity');
            //Ext.getElementById('fixTextLabel').innerHTML = data.raw.attributes.getNamedItem('fixtext').value;
            this.buildTestTable(tests);
        },
    
    
        buildTestTable: function (tests) {
            var table = this.table;
            for (var i = 0; i < tests.length; i++) {
                var test = tests[i];
                var found = test.get('assessedValue');
                if (found.length === '0') {
                    found = 'n/a';
                }
                table.add({
                    html: test.get('comment'),
                    cls: 'testTableCell'
                });
                table.add({
                    html: test.get('expectedValue'),
                    cls: 'testTableCell'
                });
                table.add({
                    html: found,
                    cls: 'testTableCell'
                });
            }
            this.doLayout();
        }
    });
    var data = {
        ruleName: "configured",
        severity: "low",
        name: "content"
    };
    var test = [{
        assessedValue: "on",
        comment: "policy is 'on'",
        expectedValue: "on",
        result: "true"
    }, {
        assessedValue: "true",
        comment: "running is 'true'",
        expectedValue: "true",
        result: "true"
    }, {
        assessedValue: "net-time.vmware.com",
        comment: "server configured",
        expectedValue: ".+",
        result: "true"
    }];
    var d = Ext.create('my.view.Dialog');
    d.show();
    d.setData(data, tests);

Thread Participants: 1

Tags for this Thread