之所以會想用這個去邊的textfield,
是因為在某次實作時,要實作一個很類似chrome的search textfield,又內含清空及搜尋的buttons
但又不想繼承field類別(好啦,我承認懶得試這方式),所以要用組裝的方式來做這東西
要把border去除一下,
(以下是extjs 6.2 )
----先準備一個css----------------------
.x-form-textfield-noborder .x-form-trigger-wrap-default {
border-width: 0px;
border-style: solid;
border-color: #d0d0d0;
}
------------------------------------------
那麼,那個要套用css的texfield就是會像以下的例子
......................................
//...外面包他的container
{
xtype: 'container',
width: 170,
height: 25,
margin: '20 0 0 10',
//textfield去邊,要用外層的container做框來包textfield & buttons.
style: {
borderColor: 'lightgray',
borderStyle: 'solid',
borderWidth: '1px'
},
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
//-------------------重點來了---------------------------
{
margin: '20 0 0 20',
xtype: 'textfield',
cls: 'x-form-textfield-noborder',
}, //之下,是兩個button
{
xtype: 'button',
style: {
background: 'white',
borderRadius: '0px',
borderStyle: 'solid',
marginRight: '3px',
marginTop: '1px',
marginBottom: '1px',
borderColor: '#d0d0d0;',
borderWidth: '0px'
},
height: 16,
width: 16,
icon: './images/icon2del.gif'
},
{
xtype: 'button',
style: {
background: 'white',
borderRadius: '0px',
borderStyle: 'solid',
marginLeft: '3px',
marginTop: '1px',
marginBottom: '1px',
borderColor: '#d0d0d0;',
borderWidth: '0px'
},
height: 18,
minWidth:20,
icon:'./images/search18x18.png'
}
]
}
--------------------------------
當然,如果這個欄位只是display only的話,那就用displayfield
尤其是在layout type是table的情況之下,xtype:'label'通常怎麼喬margin & padding都沒用的情況之下
那就用displayfield或是這個去框的textfield吧
參考:
https://blog.csdn.net/onightfalls/article/details/78601091
https://stackoverflow.com/questions/29987504/extjs-displayfield-with-same-style-as-textfield
以上
沒有留言:
張貼留言