1. #1
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    swarnendude is on a distinguished road

      0  

    Exclamation Problem removing panel border

    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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!

  4. #4
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    swarnendude is on a distinguished road

      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
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    India, Bombay
    Posts
    9
    Vote Rating
    0
    saddanand is on a distinguished road

      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
    44
    Vote Rating
    0
    kramal is an unknown quantity at this point

      0  

    Default may be it will be solution

    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
    44
    Vote Rating
    0
    kramal is an unknown quantity at this point

      0  

    Default if someone need the of panel to be deleted

    if someone need the of panel to be deleted


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