Results 1 to 8 of 8

Thread: Problem removing panel border

  1. #1
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
      0  

    Exclamation Problem removing panel border

    Hi All,

    I was displaying some links in a panel. I mentioned border:false in every possible panels and still getting a border. Panel definition is given below :

    Code:
            var sidepanel = new Ext.Panel({
                        border : false,
                        id : 'sidepanel',
                        layout : 'fit'
                    });
    Links are retrieved from database and added to that panel as HTML. Refer below code:

    Code:
    var get_links = function(store, records, options) {
                var arr = store.reader.jsonData.row;
                var links = '';
                for (var i = 0; i < arr.length; i++) {
                    links = links + '<li style="padding-top : 15px;"><a href="'
                            + arr[i].help_url + '" target="helpframe"><b>'
                            + arr[i].description + '</b></a></li>';
                }
                sidepanel.add({
                            html : '<div id="sidebar"><ul style = "border-color : #5d7288;">' + links + '</ul></div>'
                        });
            }
    
            data.on('load', get_links);
    data is datastore here. After inspecting the element i got its a generated div and the border belongs to this div:

    HTML Code:
    <div id="ext-gen165" class="x-panel-body x-panel-body-noheader" style="width: 150px; height: 109px;">
    Now how to remove this border? Any help? I have attached a image of that panel. Please refer.


    Regards
    Swar
    Attached Images Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      0  

    Default

    If you are having no border, no tbar, no bbar, no buttons, no header, no footer, then why on earth woud you go to the epense of instantiating a Panel to contain whatever single item it is you are wanting to contain?

    Just use

    Code:
        var sidepanel = new Ext.Container({
            autoEl: 'div'
            id : 'sidepanel',
            layout : 'fit'
        });
    xt
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      0  

    Default

    In fact, what you need is

    Code:
        var sidepanel = new Ext.BoxComponent({
            autoEl: 'div'
            id : 'sidepanel',
            layout : 'fit'
        });
    And then use DomHelper to insert the links directly into it. No need to create yet another Panel with the HTML in that!
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  4. #4
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
      0  

    Default

    Ok..Thanks Animal... Lemme try with ur example. I dnt know much about DomHelper..I need to go through some examples. One question - Is there any performance difference in using a panel and a boxcomponent?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      0  

    Default

    Think about it.

    A Panel has a DOM structure which allows there to be a header, a top toolbar, a body content area, a bottom toolbar, and a footer. It has machinery which allows it to be framed, to float, to be draggable, to contain child Components...

    A BoxComponent is just a neutral HTML Component which may have it's height and width set, end of story.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    India, Bombay
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Hi all, I need a css style string, to hide the top and right border of my grid panel...

    Plz Help !!!

  7. #7
    Sencha User
    Join Date
    Dec 2012
    Posts
    45
    Vote Rating
    0
      0  

    Default may be it will be solution

    Hello ! I have encountered with your problem and it seems to me it might be resolved by using

    Code:
    panel.setBorder(false)
    but sometimes, yeah sometimes this method doesnt work!

    sorry my english

  8. #8
    Sencha User
    Join Date
    Dec 2012
    Posts
    45
    Vote Rating
    0
      0  

    Default if someone need the of panel to be deleted

    you must write in the panel definition
    Code:
    listeners:{
    		afterrender : function(){
    			this.setBorder(false);
    		}
    	},

Posting Permissions

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