世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件-阿里云开发者社区

开发者社区> 开发与运维> 正文

世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件

简介: 作者李竞 http://www.jing-tech.net  http://mikelij.cnblogs.com/ 原创 Ext javascript库的官方网站www.extjs.com 是在对YUI扩展后发展出来的.
作者李竞 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">
        &nbsp;
    </form>
</body>
</html>

运行后的效果如下图:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章