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

回答

相關問題