ExtJS的4，安排表单域TBAR

enter image description here ExtJS的4，安排表单域TBAR

tbar : new Ext.Toolbar({ 
    items : [ 
     '',{ 
     xtype : 'radiofield', 
     name : 'searchType', 
     value : 'order_name', 
     boxLabel : 'Order Name' 
     },'',{ 
     xtype : 'radiofield', 
     name : 'searchType', 
     value : 'order_no', 
     boxLabel : 'Order No' 
     },'',{ 
     xtype : 'radiofield', 
     name : 'searchType', 
     value : 'status', 
     boxLabel : 'Status' 
     },'=',{ 
     xtype : 'textfield', 
     name : 'keyword', 
     value : 'Keyword' 
     },'|',{ 
     xtype : 'datefield', 
     name : 'order_from', 
     fieldLabel : 'From ', 
     labelStyle : 'width:50px', 
     value : new Date() 
     },'~',{ 
     xtype : 'datefield', 
     name : 'order_to', 
     fieldLabel : "To ", 
     labelStyle : 'width:50px', 
     value : new Date() 
     },'|',{ 
     xtype : 'button', 
     text : "Search" 
     } 
    ] 
    })

我把我的问题到附加的图像。

（比按钮和删除的DateField奇怪右边缘之间的空间的空间。）

并在TBAR按钮看起来不像按钮。它看起来只是文字。任何人都知道让它看起来很好看按钮？

谢谢！

来源

2012-02-27 Expert wanna be

要添加空间，您可以在引号内添加，基本上可以插入任何html，包括图像。

额外空间与日期字段试图抓取的宽度有关。您不应该在labelStyle中设置宽度，而是直接设置宽度，以便该字段可以正确计算所需的空间量。例如：

labelWidth: 50, //label only 
width: 200, //label + input

您的活生生的例子：http://jsfiddle.net/dbrin/PhAbR/2/

来源

2012-02-27 23:54:08 dbrin

谢谢！（这个例子真的很棒！） – 2012-02-29 19:09:56

我可以再问一个问题吗？我使用“tbar：new Ext.Toolbar（{...”）创建了工具栏，但是您使用“tbar：Ext.create（'Ext.Toolbar'，{...”创建了工具栏。您是否知道如何不同以及以何种方式我遵循？谢谢！ – 2012-02-29 19:16:26

创建ExtJS组件时，不应再使用“new”关键字，而应使用Ext.create。 – dbrin 2012-02-29 21:30:26

ExtJS的4，安排表单域TBAR

回答

相关问题