当我们将组件添加到面板时，面板具有html和丰富的外部样式来修改按钮和选择框的显示方式当您加载网格时，所有自定义按钮样式都是可见的，即使隐藏了实际html的面板点击：

我怀疑，我们正在用css定义按钮外观。在索引中链接的css。将这些工件放入css代码的php结果：

body {
    background-color: DodgerBlue;
}
.tulostus {
    padding-top: 400px !important;
}
.settings {
    width: 100%;
    height: 100%;
}
.content {
    margin: auto;
    width: 800px;
    background-color: white;
    padding: 20px;
    padding-left;
    padding-right: 20px;
    font-family: Verdana;
    /* border-radius */
    //-webkit-border-radius: 20px;
    //-moz-border-radius: 20px;
    //border-radius: 20px;
    /* box-shadow */
    //box-shadow: 30px -30px teal;
}
.row-wrapper {
    margin: auto;
    width: 100%;
    vertical-align: center;
}
 .desc {
     position: relative;
     width: 200px;
}

.inline {
    display: inline-block;
}
table {
    width: 100%;
}
.option {
    width: 400px;
    text-wrap: none;
}
.info {
    width: 300px;
    text-wrap: none;
    text-align: right;
    padding-right: 15px;
}
.print-select {
    #padding-right: 10px;
}
.floatright {
    float: right;

}
.more {
    width: 100%;    
}   
.custom-select {
  #position: relative;
  #float:right;
  #padding-right: 20px;
  text-align: left;
  #width: inherit;

  background-color: DodgerBlue;
}
.button-div {
    #float: right;
}
select {
  #display: none; /*hide original SELECT element:*/
  padding: 15px 5px 15px 15px;
  border: none;
  font-family: Verdana;
  font-weight: bold;
  background-color: DodgerBlue;
  color: white;
  outline: none;
  min-width: 150px;
  #border-color: DodgerBlue;
  cursor: pointer;

  /*Poistetaan decoraatiot uutta nuolta varten */   
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;  
  &::-ms-expand { display: none };  
}
/*
.custom-select:focus{

    content: "▲";
    position: absolute;
    top: 5;
    left: calc(100% - 30px);
    #height: 100%;
    font-size: 60%;
    padding: 12px 7px;
    background-color: red;
    color: white;
    pointer-events: none;
}*/
.x-viewport, .x-viewport > .x-body {
    touch-action: auto;
}
label.custom-select {
    position: relative;
    display: inline-block;  
}
/* Select new arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 4;
    left: calc(100% - 30px);
    #height: 100%;
    font-size: 80%;
    padding: 12px 7px;
    background-color: DodgerBlue;
    color: white;
    pointer-events: none;
}
option:hover {
    cursor: pointer;
}
option:hover,
option:focus,
option:active,
option:checked {
  #background: linear-gradient(#5A2569, #5A2569);
}

.no-pointer-events .custom-select:after {
    content: none;

}
.button {
  background-color: #2471a3;
  #appearance: none;
  border: none;
  color: white;
  padding: 14px 25px 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  cursor:pointer;
  /*background-color: rgba(0, 0, 0, 0.1);
  /*background-color: #4CAF50; /* Green */
  color: white;
}
.button:active {
  background-color: darkblue;
}
.small {
  padding: 4px 15px;
}
.red {
    background-color: red;
}
.red:active {
    background-color: darkred;
}

我们正在将组件加载到面板以显示自定义html。这是ex.js代码：

// Alustetaan tulostusnäkymä
var tulostaWeek = Ext.create('Ext.panel.Panel', {
    title: 'Print Week',
    //renderTo: Ext.getBody(),
    items: tulostaWeek2
});
// Alustetaan tulostusnäkymä
var tulostaWeek2 = Ext.create('Ext.Component', {
    title: 'Print Week',
    html: '<?php echo str_replace(array("\r", "\n"), '', file_get_contents('pdf-print/pdf-print.php'));?>',
    loadScripts: true,
    callback :  documentPrintLoaded (),
    scriptScope: this,
    Cls: "tulostus",
    width: "100%",
    height: "100%",
    padding: 0,
    autoScroll: true,
    style: {
        //color: '#FFFFFF',
        padding: '20px',
        backgroundColor:'DodgerBlue'
        //overflow: auto
    },
    renderTo: Ext.getBody()
});

//alustetaan tabpanel jonka sisältää centerweekin taulut
// Lisätty välilehti viikkotuntien tulostus
var tabPanelWeek = Ext.create('Ext.tab.Panel', {
    tabPosition: 'top',
    region: 'center',
    hidden: false,
    items: [
        centerWeek, tulostaWeek2
    ]
    /*listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    }
    /*handleClick: function(e, t){
        alert('ok');
    } */       
});