Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Belgium
    Posts
    3
    Vote Rating
    0
    gizmo410 is on a distinguished road

      0  

    Default Unanswered: How to apply padding dynamically to a panel ?

    Unanswered: How to apply padding dynamically to a panel ?


    Hi !

    I would like to apply padding around a panel dynamically but it does not render correctly.

    This is my structure :
    Code:
    {xtype: 'basePanel', cls:'mainPanel', layout:'fit', items:[
      {xtype:'panel', layout: 'border', items: [
        {xtype:'panel',region:'west', frame: true, width:300, items:[
        {xtype:'recordingStatisticsFieldSet'},
        {xtype:'surveyStatisticsFieldSet'}
        ]},
        {xtype:'panel', region:'center', frame: true},
        {xtype:'activityLogGrid',region:'east', width: 400}
      ]}
    ]}
    The panel containing the layout border should receive the padding.
    So I tried applying a style containing the padding rules by doing this :
    Code:
    var panel = this.getMainPanel().getComponent(0);
    panel.getEl().toggleCls('padding50');
    But it does not work.
    The panel is partly rendered outside the view.

    Any idea ?

    Thanks in advance !

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hello buddy,
    When you are adding padding to your panel after that you must recalculate its layout also.
    For that you just call the doLayout() of that panel to which you are giving padding.Code is below:

    Code:
    var panel = this.getMainPanel().getComponent(0);
    panel.getEl().toggleCls('padding50');
    panel.doLayout();   // this is the line you need to add to your code.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Belgium
    Posts
    3
    Vote Rating
    0
    gizmo410 is on a distinguished road

      0  

    Default


    Thx for the quick reply !

    Well, I already tried it and sadly enough, it does not work.

    This is the content of my css class :
    Code:
    .padding50 {
      padding-top: 50px;
      padding-right: 50px;
      padding-left: 50px;
      padding-bottom: 50px;
    }

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,
    As I review your code you have given width-400px to the west panel & width-300px to the east panel. You are applying padding 50px to the parent container. It means that the Ext-item where you are rendering your xtype: 'basePanel' should have width atleast 800px(400px of west + 300px of east + 100px padding).
    So width may be the problem. So review the following code, it is working well:

    Code:
    var myForm = Ext.extend(Ext.window.Window, {
        renderTo: Ext.getBody(),
        title: 'doLayout method testing',
        layout: 'fit',
        height: 400,
        width: 500,
        initComponent: function () {
            this.items = this.buildItems();
            this.tbar = this.buildTbar();
            myForm.superclass.initComponent.call(this);
        }
        , buildTbar: function(){
            return [
                {
                    xtype: 'button'
                    , text: 'Click to add padding.'
                    , handler: function(){
                        var panel = this.ownerCt.ownerCt.getComponent(0).getComponent(0);
                        panel.getEl().toggleCls('padding50');
                        panel.doLayout();
                    }
                }
            ];
        }
        , buildItems: function () {
            return {
                xtype: 'panel'
                , cls:'mainPanel'
                , layout:'fit'
                , items:[
                    {
                        xtype:'panel'
                        , name: 'paddingPanel'
                        , layout: 'border'
                        , items: [
                            {
                                xtype:'panel'
                                ,region:'west'
                                , frame: true
                                , width:150
                                , items:[
                                    {xtype:'box', html: 'first item of west panel.'},
                                    {xtype:'box', html: 'second item of west panel.'}
                                ]
                            },
                            {xtype:'panel', region:'center', frame: true},
                            {xtype:'panel',region:'east', width: 50}
                        ]
                    }
                ]
            };
        }
    });
    
    
    Ext.onReady(function () {
        new myForm().show();
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Belgium
    Posts
    3
    Vote Rating
    0
    gizmo410 is on a distinguished road

      0  

    Default


    Thx sword-it for your help.

    I dug a bit further and found that it was caused by a bug inside Ext 4.0.7.
    When using Ext 4.1.0, the problem does not occur anymore.

Thread Participants: 1

Tags for this Thread