<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <!--ExtJs4.0官方下載以下樣式檔案--> <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <!--ExtJs4.0官方下載以下ExtJs檔案--> <script src="extjs/ext-all.js" type="text/javascript"></script> <!--ExtJs4.0官方下載以下ExtJs顯示中文檔案--> <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> Ext.onReady(function () { var menu = new Ext.menu.Menu({ items: [ { text: "我是銨鈕一" }, { text: "我是銨鈕二", icon: "icons/add16.gif", handler: function (b) { alert("你點我了"); } }, { xtype: "menuseparator" }, { text: "你要不要最大化", xtype: "menucheckitem", listeners: { checkchange: function (m, checked) { if (checked) { Ext.MessageBox.alert("提示", "你選中了我"); } else { Ext.MessageBox.alert("提示", "你沒選中我"); } } } } ] }); var win = new Ext.window.Window({ width: 500, height: 600, title: "工具條樣本", tbar: [ { text: "銨鈕" }, { xtype: "tbseparator" }, { xtype: "splitbutton", text: "開啟", menu: menu }, { xtype: "tbspacer", width: 30 }, { xtype: "textfield" }, {xtype:"tbfill"}, {xtype:"label",text:"我要到最後"} ] }); win.show(); }); </script></head><body></body></html>
效果預覽如下: