嘿,我有一个小问题,但似乎找不到答案。
当我在ExtJS工具栏中放置一个按钮时,它会出现默认外观(就像任何Windows工具栏选项一样)
我该如何让它看起来像表单中的按钮?
尝试像这样:
tbar: [
{ xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' }
]
这个与此相当接近:ExtJS 按钮样式工具栏
我寻找的答案在那个问题里找到了:
添加
ctCls: 'x-btn-over'
将按钮的配置添加到代码中,使其实际上看起来像一个按钮。这有点像一种hack,因为本质上是通过样式来让工具栏按钮看起来像是被悬停在上面,但在我的情况下,我认为这已经足够好了。
编辑:自从3版本以来,我就没有接触过ExtJS,所以看起来这个方法不再适用。
您需要将其包装在面板中,这里是Extjs 4.2.5的解决方案。
{
xtype: 'panel',
items: {
xtype: 'button',
text : 'My button'
}
}
xtype: 'button',
id: 'processButton',
text: 'Process',
ctCls: 'x-toolbar-grey-btn'
额外类别的样式,存储在单独的CSS文件中:
.x-toolbar-grey-btn .x-btn-tl{
background-position: 0 0;
}
.x-toolbar-grey-btn .x-btn-tr{
background-position: -3px 0;
}
.x-toolbar-grey-btn .x-btn-tc{
background-position: 0 -6px;
}
.x-toolbar-grey-btn .x-btn-ml{
background-position: 0 -24px;
}
.x-toolbar-grey-btn .x-btn-mr{
background-position: -3px -24px;
}
.x-toolbar-grey-btn .x-btn-mc{
background-position: 0 -1096px;
}
.x-toolbar-grey-btn .x-btn-bl{
background-position: 0 -3px;
}
.x-toolbar-grey-btn .x-btn-br{
background-position: -3px -3px;
}
.x-toolbar-grey-btn .x-btn-bc{
background-position: 0 -15px;
}
.x-toolbar-grey-btn button{
font-weight: bold;
}
由于Ext按钮图像位于文件'/ext-3.3.3/resources/images/default/button/btn.gif'中,因此我仅更改了background-position属性。它看起来像本地按钮。
在Sencha论坛上查看此帖 工具栏按钮样式。我也发现将按钮样式设置为文本对用户来说相当不直观。只需在您的ExtJs CSS主文件中添加几行CSS代码,即可全局更改应用程序的外观。