世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件
来源:互联网 发布:京东算法工程师面试 编辑:程序博客网 时间:2024/04/28 19:00
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">
</form>
</body>
</html>
运行后的效果如下图:
- 世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件
- 世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件
- EXT 世界级的Javascript 、UI 、AJAX 组件库
- sencha touch 的Ext.menu组件学习
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- Ext.Toolbar和Ext.Menu的使用
- 【ExtJs学习系列】Ext的Menu组件(三)
- 学习EXT第三天:Menu组件
- Ext学习笔记05 - UI组件 - Panel,TextField
- 学习YUI.Ext 第三天:EXT:Menu组件
- 初学Ext UI组件总结及(一)-- >读Ext.Component源码学习笔记
- Ext Menu Widget (EXT 菜单组件)
- Ext学习笔记3-事件及组件
- 学习使用YUI的Menu组件
- Ext UI组件 - Component, Button
- Ext UI组件 - Panel,TextField
- Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
- Ext.button/menu/toolbar
- 退学吧,开始行动
- linux 开发的文章收藏 以及ACE开发文章
- 开发手记---MYSQL几个问题的解决
- 源自《设计模式》的设计原则
- ResultSet详解
- 世界级的javascript ajax client端UI库 Ext学习笔记 menu组件 和 toolbar组件
- oracle 日期函数介绍
- 如何发现我所爱?如何做我所爱?
- 小情歌--苏打绿
- QT的信号与槽机制介绍
- 设计模式-OOD的设计原则(1)-"开-闭原则"
- xmlHTTP
- 招聘有感
- 配置RAID磁盘阵列