简体   繁体   English

如何禁用Ext JS面板和工具栏的边界线?

[英]How to disable border line of Ext JS panel and Toolbar?

I'm try to hide a border line but can not be success about that! 我试图隐藏边界线,但不能成功! Here is a screenshot of mentioned border line. 这是提到的边界线的屏幕截图

As you will notice between 'Export Excel' and radiofield a vertical line is appear. 您会注意到,在“导出Excel”radiofield之间会出现一条垂直线。 Below you will find some code snippets which includes those elements. 在下面,您将找到一些包含这些元素的代码段。 I've used a Toolbar and a panel to create those items. 我使用了Toolbarpanel来创建这些项目。 So tried several config such as border: false , frame: false , bodyBorder: false for each class but non of them be success to hide this line. 因此,对每个类尝试了几种配置,例如border: falseframe: falsebodyBorder: false ,但没有一个可以成功隐藏此行。

Thanks for advices. 感谢您的建议。

return [
            {
                xtype: 'panel',
                scrollable: true,
                // border: false,
                // bodyBorder: false,
                // frame: false,
                layout: {type: 'hbox', align: 'middle', pack: 'start'},
                items: [
                    {
                        xtype: 'panel',
                        // border: false,
                        // bodyBorder: false,
                        items: me.listToolbar() //This is end of 'toolbar' class.
                    },
                    {
                        xtype: 'panel',
                        items: me.subModuleTb() //'radiofield' starts by here
                    }
                ]
            }
        ];

and here is that called ListToolbar class: 这就是所谓的ListToolbar类:

Ext.define('MyApp.ListToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.listtoolbar',

    requires: [],

    dock: 'top',
    //border: 0, //This is not disappear the line as well
    //cls: 'list-toolbar //Defined 'border' as zero on all.scss for this cls but did not worked as well!
    layout: {
        type: 'table',
        tdAttrs: { style: 'padding: 5px 10px;' }
    },
    defaults: {
        enableToggle: true
    },
    scope:this,
    items: [

What is the version you are using? 您正在使用什么版本? I hope this border appears in the toolbar. 我希望该边框出现在工具栏中。 You can use "border": 0 property in the toolbar. 您可以在工具栏中使用“边框”:0属性。 or you can control in the CSS by adding "Cls" property. 或者您可以通过添加“ Cls”属性在CSS中进行控制。

Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
**border:0,**
width   : 500,
items: [
    {
        // xtype: 'button', // default for Toolbars
        text: 'Button'
    },
    {
        xtype: 'splitbutton',
        text : 'Split Button'
    },
    // begin using the right-justified button container
    '->', // same as { xtype: 'tbfill' }
    {
        xtype    : 'textfield',
        name     : 'field1',
        emptyText: 'enter search term'
    },
    // add a vertical separator bar between toolbar items
    '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
    'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
    { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
    'text 2',
    { xtype: 'tbspacer', width: 50 }, // add a 50px space
    'text 3'
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM