Results 1 to 7 of 7

Thread: Horizontal scrollbar in panel, IE

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default Horizontal scrollbar in panel, IE

    I have viewport with border layout. After I upgraded our project to ExtJS 3.0 I see one bad thing... maybe I've made mistake, maybe someone can tell me where to look, because I don't see any problems in code.
    First picture, how form looks in FF, Chrome, Opera after you resize browser.



    It looks very nice, how it should be. And when I resize IE8 I get less optimistic picture :



    Horizontal scrollbar shows...

    Form configuration is like this :

    Code:
    {
      "autoHeight": false,
      "autoWidth": false,
      "baseCls": "x-plain",
      "autoScroll": true,
      "bodyStyle": "padding:2px;",
      "frame": false,
      "border": false,
      "disabled": false,
      "anchor": "99%",
      "buttonAlign": "right",
      "layout": "form",
      "xtype": "panel",
      "items": [
        {
          "items": [
            {
              "items": [
                {
                  "maxLength": 1000,
                  "maxLengthText": "?????????? ??????????? ?????????? ????? ????????? ????????!",
                  "autoCreate": {
                    "tag": "input",
                    "type": "text",
                    "size": 20,
                    "autocomplete": "off",
                    "maxlength": 1000
                  },
                  "enableKeyEvents": true,
                  "hideLabel": false,
                  "allowBlank": false,
                  "alwaysSend": false,
                  "anchor": "99%",
                  "blankText": "???? ??????????? ? ??????????!",
                  "hidden": false,
                  "readOnly": false,
                  "tooltipClass": "ttip_warn",
                  "labelSeparator": ":",
                  "msgTarget": "qtip"
                  "disabled": false,
                  "fieldLabel": "?????????",
                  "bodyStyle": "padding:5px;",
                  "name": "sDescription",
                  "xtype": "textfield",
                  "forceLayout": false
                },
                {
                  "maxLength": 400,
                  "maxLengthText": "?????????? ??????????? ?????????? ????? ????????? ????????!",
                  "autoCreate": {
                    "tag": "input",
                    "type": "text",
                    "size": 20,
                    "autocomplete": "off",
                    "maxlength": 400
                  },
                  "enableKeyEvents": true,
                  "hideLabel": false,
                  "allowBlank": true,
                  "alwaysSend": false,
                  "anchor": "99%",
                  "blankText": "???? ??????????? ? ??????????!",
                  "hidden": false,
                  "readOnly": false,
                  "tooltipClass": "ttip_warn",
                  "labelSeparator": ":",
                  "msgTarget": "qtip",
                  "disabled": false,
                  "fieldLabel": "????????????",
                  "bodyStyle": "padding:5px;",
                  "name": "sCaption",
                  "xtype": "textfield",
                  "forceLayout": false
                }
              ],
              "layout": "form",
              "border": false,
              "frame": false,
              "labelAlign": "top",
              "columnWidth": 1.0,
              "xtype": "container"
            }
          ],
          "layout": "column",
          "hidden": false,
          "xtype": "container"
        },
        {
          "items": [
            {
              "items": [
                {
                  "enableKeyEvents": true,
                  "hideLabel": false,
                  "allowBlank": false,
                  "alwaysSend": false,
                  "anchor": "99%",
                  "hidden": false,
                  "readOnly": false,
                  "labelSeparator": ":",
                  "msgTarget": "qtip",
                  "disabled": false,
                  "bodyStyle": "padding:5px;",
                  "name": "id",
                  "xtype": "hidden",
                  "forceLayout": false
                },
                {
                  "enableKeyEvents": true,
                  "hideLabel": false,
                  "allowBlank": false,
                  "alwaysSend": false,
                  "anchor": "99%",
                  "hidden": false,
                  "readOnly": false,
                  "labelSeparator": ":",
                  "msgTarget": "qtip",
                  "disabled": false,
                  "bodyStyle": "padding:5px;",
                  "name": "Status",
                  "xtype": "hidden",
                  "forceLayout": false
                }
              ],
              "layout": "form",
              "border": false,
              "frame": false,
              "labelAlign": "top",
              "columnWidth": 1.0,
              "xtype": "container"
            }
          ],
          "layout": "column",
          "hidden": true,
          "xtype": "container"
        }
      ],
      "buttons": [
        {
          "allowDepress": false,
          "handler": function() {this.load();},
          "hidden": false,
          "iconCls": "refresh",
          "text": "",
          "tooltip": "???????? ????????",
          "disabled": false,
          "name": "refresh",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.deleteItem();},
          "hidden": false,
          "iconCls": "remove",
          "text": "???????",
          "tooltip": "??????? ???????",
          "disabled": true,
          "name": "remove",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "menu": {
            "items": [
              {
                "text": "?????",
                "handler": function() {this.changeElementStatus(0)},
                "iconCls": "page_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "? ??????",
                "handler": function() {this.changeElementStatus(10)},
                "iconCls": "page_edit_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "???????",
                "handler": function() {this.changeElementStatus(100)},
                "iconCls": "page_key_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "????????????",
                "handler": function() {this.changeElementStatus(200)},
                "iconCls": "page_cancel_png",
                "hidden": false,
                "disabled": false
              }
            ],
            "disabled": false,
            "forceLayout": false
          },
          "hidden": false,
          "iconCls": "page_edit_png",
          "text": "? ??????",
          "tooltip": "ChangeStatus",
          "disabled": false,
          "name": "ChangeStatus",
          "xtype": "splitbutton",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.save();},
          "hidden": false,
          "iconCls": "save",
          "text": "?????????",
          "tooltip": "?????????",
          "disabled": false,
          "name": "save",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.saveAndClose();},
          "hidden": false,
          "iconCls": "save",
          "text": "????????? ? ???????",
          "tooltip": "????????? ? ???????",
          "disabled": false,
          "name": "saveandclose",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.closeWithOutSave();},
          "hidden": false,
          "iconCls": "close",
          "text": "??????? ?? ????????",
          "tooltip": "??????? ?? ????????",
          "disabled": false,
          "name": "close",
          "xtype": "button",
          "forceLayout": false
        }
      ],
      "caption": "?????????????? ...",
      "labelWidth": 0,
      "labelAlign": "top"
    }
    Maybe it has some places to be refactored?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Bizarre nesting there. Think about your layouts. What do you NEED?

    You have created a column layout panel containing one column containing your actual stuff. WHY?

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default

    Form automatically generated from C#. And there can be lots of columns with different sizes and different components... For now I am cleaning out all the code, so maybe this nesting will be the first victim now

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    It's an unsized Panel that you are making layout: 'column', so that's invalid for a start.

    To size it's column(s), IT has to have a size

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default

    Some optimisations made :
    Code:
    {
      "autoHeight": false,
      "autoWidth": false,
      "baseCls": "x-plain",
      "autoScroll": true,
      "bodyStyle": "padding:2px;",
      "frame": false,
      "border": false,
      "disabled": false,
      "anchor": "99%",
      "buttonAlign": "right",
      "layout": "form",
      "xtype": "extpanel",
      "items": [
        {
          "enableKeyEvents": true,
          "hideLabel": false,
          "allowBlank": false,
          "alwaysSend": false,
          "anchor": "99%",
          "hidden": false,
          "readOnly": false,
          "labelSeparator": ":",
          "msgTarget": "qtip",
          "disabled": false,
          "bodyStyle": "padding:5px;",
          "name": "id",
          "xtype": "hidden",
          "forceLayout": false
        },
        {
          "maxLength": 1000,
          "maxLengthText": "?????????? ??????????? ?????????? ????? ????????? ????????!",
          "autoCreate": {
            "tag": "input",
            "type": "text",
            "size": 20,
            "autocomplete": "off",
            "maxlength": 1000
          },
          "enableKeyEvents": true,
          "hideLabel": false,
          "allowBlank": false,
          "alwaysSend": false,
          "anchor": "99%",
          "blankText": "???? ??????????? ? ??????????!",
          "hidden": false,
          "readOnly": false,
          "tooltipClass": "ttip_warn",
          "labelSeparator": ":",
          "msgTarget": "qtip",
          "disabled": false,
          "fieldLabel": "?????????",
          "bodyStyle": "padding:5px;",
          "name": "sDescription",
          "xtype": "exttextfield",
          "forceLayout": false
        },
        {
          "maxLength": 400,
          "maxLengthText": "?????????? ??????????? ?????????? ????? ????????? ????????!",
          "autoCreate": {
            "tag": "input",
            "type": "text",
            "size": 20,
            "autocomplete": "off",
            "maxlength": 400
          },
          "enableKeyEvents": true,
          "hideLabel": false,
          "allowBlank": true,
          "alwaysSend": false,
          "anchor": "99%",
          "blankText": "???? ??????????? ? ??????????!",
          "hidden": false,
          "readOnly": false,
          "tooltipClass": "ttip_warn",
          "labelSeparator": ":",
          "msgTarget": "qtip",
          "disabled": false,
          "fieldLabel": "????????????",
          "bodyStyle": "padding:5px;",
          "name": "sCaption",
          "xtype": "exttextfield",
          "forceLayout": false
        },
        {
          "enableKeyEvents": true,
          "hideLabel": false,
          "allowBlank": false,
          "alwaysSend": false,
          "anchor": "99%",
          "hidden": false,
          "readOnly": false,
          "labelSeparator": ":",
          "msgTarget": "qtip",
          "disabled": false,
          "bodyStyle": "padding:5px;",
          "name": "Status",
          "xtype": "hidden",
          "forceLayout": false
        },
        {
          "enableKeyEvents": true,
          "hideLabel": false,
          "allowBlank": false,
          "alwaysSend": true,
          "anchor": "99%",
          "hidden": false,
          "readOnly": false,
          "labelSeparator": ":",
          "msgTarget": "qtip",
          "disabled": false,
          "bodyStyle": "padding:5px;",
          "name": "tstamp",
          "xtype": "hidden",
          "forceLayout": false
        }
      ],
      "buttons": [
        {
          "allowDepress": false,
          "handler": function() {this.load();},
          "hidden": false,
          "iconCls": "refresh",
          "text": "",
          "tooltip": "???????? ????????",
          "disabled": false,
          "name": "refresh",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.deleteItem();},
          "hidden": false,
          "iconCls": "remove",
          "text": "???????",
          "tooltip": "??????? ???????",
          "disabled": true,
          "name": "remove",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "menu": {
            "items": [
              {
                "text": "?????",
                "handler": function() {this.changeElementStatus(0)},
                "iconCls": "page_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "? ??????",
                "handler": function() {this.changeElementStatus(10)},
                "iconCls": "page_edit_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "???????",
                "handler": function() {this.changeElementStatus(100)},
                "iconCls": "page_key_png",
                "hidden": false,
                "disabled": false
              },
              {
                "text": "????????????",
                "handler": function() {this.changeElementStatus(200)},
                "iconCls": "page_cancel_png",
                "hidden": false,
                "disabled": false
              }
            ],
            "disabled": false,
            "forceLayout": false
          },
          "hidden": false,
          "iconCls": "page_edit_png",
          "text": "? ??????",
          "tooltip": "ChangeStatus",
          "disabled": false,
          "name": "ChangeStatus",
          "xtype": "splitbutton",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.save();},
          "hidden": false,
          "iconCls": "save",
          "text": "?????????",
          "tooltip": "?????????",
          "disabled": false,
          "name": "save",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.saveAndClose();},
          "hidden": false,
          "iconCls": "save",
          "text": "????????? ? ???????",
          "tooltip": "????????? ? ???????",
          "disabled": false,
          "name": "saveandclose",
          "xtype": "button",
          "forceLayout": false
        },
        {
          "allowDepress": false,
          "handler": function() {this.closeWithOutSave();},
          "hidden": false,
          "iconCls": "close",
          "text": "??????? ?? ????????",
          "tooltip": "??????? ?? ????????",
          "disabled": false,
          "name": "close",
          "xtype": "button",
          "forceLayout": false
        }
      ],
      "caption": "?????????????? ...",
      "labelWidth": 0,
      "labelAlign": "top",
    }
    It helped, but somtimes it seems that it doesn't resize anyway, and scrollbar shows...

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, it's layout: 'form'

    So you MUST configure all child items with an anchor config if you expect them to get their width managed

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Thing is what's not getting resized? That thing you just posted?

    Because it's up to the Container that is IN to size it.

Posting Permissions

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