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

转载 2007年09月17日 22:47:00
作者李竞 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 id="treepanel"></div>
    <div id="hello-dlg">
    </div>
    <form id="form1" runat="server">
        &nbsp;
    </form>
</body>
</html>

运行后的效果如下图:

 

Chrome学习笔记(三):UI组件,皮肤引擎

原创文章,转载请注明:转载自Soul Apogee 本文链接地址:Chrome学习笔记(三):UI组件,皮肤引擎 —— 控件库 这篇文章是接着上篇文章继续聊的,Chrome的代码实在太多,每一...
  • wanfengnianhua
  • wanfengnianhua
  • 2017年04月25日 18:56
  • 252

sheral——一个方便定制及扩展的UI组件库

简单来说,sheral是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是she...
  • IMWebteam
  • IMWebteam
  • 2016年11月23日 20:30
  • 620

h5学习笔记:UI库

自从接触了web开发以来,每天都会很纠结选什么UI框架才是比较合适?摆在这个问题面前是一个技术的选型。要想知道,web开发的坑实在太深。不断地大厂推出开源框架,不断地发现很多造轮子。或者看到一个比较漂...
  • hero82748274
  • hero82748274
  • 2017年05月03日 23:58
  • 689

前端组件库大合集-必备收藏

来源:http://www.xuanfengge.com/he-sets-the-front-end-component-library-the-essential-collection.html ...
  • gtd03
  • gtd03
  • 2015年09月08日 17:47
  • 4485

移动端组件调研_2016

UIKit 简介 兼容性 Github 使用反馈 Zurb Foundation简介 兼容性 Github 使用反馈 JQuery MobileGithub ionic简介 组件 兼容性 Github...
  • u010552788
  • u010552788
  • 2016年10月10日 15:37
  • 1264

actionBar和Toolbar中如何动态隐藏和修改menu上的菜单

actionBar大家都应该很熟了,非常好用的东西,如果不是很熟,可以看一下http://blog.csdn.net/guolin_blog/article/details/18234477,里面介绍...
  • chenguang79
  • chenguang79
  • 2015年09月30日 11:01
  • 20484

Android UI 组件开源软件 共有47款

http://www.oschina.net/project/tag/342/android-ui Android显示GIF动画 GifView GifView 是一个为了...
  • jaycee110905
  • jaycee110905
  • 2013年07月23日 16:37
  • 3334

android 使用原生UI组件

在如今的App中,已经有成千上万的原生UI部件了——其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多。React Native已经封装了大部分最常见的组件,譬如Scr...
  • u012915455
  • u012915455
  • 2016年09月19日 11:17
  • 1009

使用ext封装自定义组件-导航栏组件

/** * 导航组件。 * User: zhangzg 492274248@qq.com * Date: 14-7-11 * Time: 下午3:39 * */ Ext.define('E...
  • vbxnt521_edu
  • vbxnt521_edu
  • 2014年07月22日 14:03
  • 738

谈谈Ext JS的组件——组件基类:Ext.Component

概述Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了。然后第二段说明了它包含的基本功能:隐藏/显示、启用/禁用以及尺寸控制等。除了以上这些基本...
  • tianxiaode
  • tianxiaode
  • 2015年06月23日 00:34
  • 5969
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件
举报原因:
原因补充:

(最多只允许输入30个字)