作者李競 http://www.jing-tech.net http://mikelij.cnblogs.com/ 原創
Ext javascript庫的官方網站www.extjs.com
是在對YUI擴充後發展出來的. 介面非常漂亮,有多套skin. 現在有2.0 preview了. 同時也將jquery, prototype庫包括進來了. 非常好. 不過開發時要有一個合適的java script IDE才好, 網上有一些工具的. visual studio 2008將支援javascript更好. 大家有福了.
本人下載了此網站上的examples,學習了一下menu控制項和toolbar組件
//將下面javascript代碼放到mytest.js檔案中, 再和你的網頁檔案放到一起,如果是.net, 可以是aspx, html, htm; 如果是java的, 可以和jsp, html, htm放到一起.
function MainFormJS(){
// Create the menu
var prjmenu = new Ext.menu.Menu();
prjmenu.add(
{ text: 'New project',handler: newProject },
{ text: 'Open project' },
{ text: 'Close project' }
);
// Create the menu
var dbsmenu = new Ext.menu.Menu();
dbsmenu.add(
{ text: 'Open schema' },
{ text: 'Generate data entity' },
{ text: 'Design queries' }
);
// Create the menu
var uimenu = new Ext.menu.Menu();
uimenu.add(
{ text: 'Design UI' }
);
var tb = new Ext.Toolbar('toolbar');
tb.add(
{text:'Project',menu: prjmenu},
{text:'Database',menu: dbsmenu},
{text:'UI',menu: uimenu}
);
function newProject()
{
alert("New project clicked");
}
}
Ext.onReady(MainFormJS);
程式註解:menu控制項要和其他的控制項一起捆綁, 才能顯示出來. 如此例和 toolbar捆綁.
事件handler: newProject 是New project功能表項目的事件處理函數
在你的網頁檔案中(如aspx, html, htm, jsp等檔案)
加上這幾句:
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script language="javascript" src="ext-base.js" type="text/javascript"></script>
<script language="javascript" src="ext-all-debug.js" type="text/javascript"></script>
<script language="javascript" src="mytest.js" type="text/javascript"></script>
在body部分要有如下的幾個div做宿主, 以配合上面的javascript程式:
<div id="toolbar"></div>
<div id="treepanel"></div>
<div id="hello-dlg">
</div>
一個完整的aspx檔案如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainForm.aspx.cs" Inherits="MainForm" %>
<!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 runat="server">
<title>www.jing-tech.net jing-tech studio 畫程式的工具</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script language="javascript" src="ext-base.js" type="text/javascript"></script>
<script language="javascript" src="ext-all-debug.js" type="text/javascript"></script>
<script language="javascript" src="mytest.js" type="text/javascript"></script>
</head>
<body>
<div id="toolbar"></div>
</div>
<form id="form1" runat="server">
</form>
</body>
</html>
運行後的效果如: