第十三章 extjs4_教程.pdf

Extjs4 教程 1 Extjs 初步 1.1 搭建ExtJS 可视化开发环境： 设您的机器已经安装Eclipse ，Tomcat 和Sql Server （或MySql) ，如果没有请参阅其 他相关资料。 安装ExtJS 应用的可视化开发环境： 可以从 获取，或直接从/zh_cn.html 下 载 ，并按提示或以下步骤进行安装： 1、安装任意类型的一款JAVA Web 应用服务器（如Tomcat ）和数据库（如 MySql ），并且在Web 应用服务器中创建一个JNDI 链接串，以访问所创建的数据 库。 2、解压缩下载的安装包webbuilder.zip ，并把wb 目录部署到Web 应用服务器。例 如 ，您使用Tomcat ，那么可直接复制wb 目录至Tomcat 的webapps/wb 目录。 3、打开浏览器并访问 [http://ip:port/wb] ，使用安装向导来完成WebBuilder 的安 装。例如，访问 http://localhost:8080/wb 4、使用管理员帐户登录到系统 ，管理员默认用户名称和密码均为 admin。 1.2 测试例子 开始... Webroot 目录下建立hellowword.js 输入如下内容: Ext.application({ name: HelloExt, launch: function () { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { title: Hello Ext, html : Hello! Welcome to Ext JS. } ] }); } }); 再建立一个helloword.html,输入如下内容 html head titleHello Ext/title link rel=stylesheet type=text/css href=resources/css/ext-all.css script type=text/javascript src=ext-all.js/script script type=text/javascript src=HelloExt.js/script /head body/body /html Html 文件中只引入了一个css 和2 个js 文件 ，注意引用路径和你建立文件路径是否能 匹配，如果路径没有问题的话 ，打开浏览器输入 http://localhost:8080/Ext4/helloworld.html 您将会看到浏览器里显示一个panel ，标题 是Hello Ext,内容Hello! Welcome to Ext JS. ，如果没有，请查看是否有路径不匹配。 其他： 在ExtJS 里最常用的,应该就是Ext.onReady 和Ext.application 这两个个方法了,而且它 也可能是你学习ExtJS 所接触的第一个方法,这个方法在当前的DOM 加载完毕后自动 调用,保证页面内的所有元素都能被 Script 所引用.可以尝试在这个方法中添加一条语句, 看看页面打开后是什么反映 （先建立js 和html 文件 ，将如下代码加入js 文件中，html 文件相应引入对应的js 文 件 ， 文档所有示例代码均如此方式运行以下不再重复） Ext.onReady(function() { alert(hello world !); }); 上面的代码将在页面加载完毕后弹出一对话框,打印出hello world!字样. 获取元素 还有一个常用的方法,就是获取页面上的元素了,ExtJS 提供了一个get 方法,可以根据ID 取到页面上的元素: var myDiv = Ext.get(myDiv); 会取到页面上ID 为myDiv的元素.如果使用Element.dom 的方法,则可以直接操作底层 的DOM 节点,Ext.get 返回的则是一个Element 对象. 在不能使用这种方式来获取多个DOM 的节点,或是要获取一些ID 不一致,但又有相同 特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的 标签,则可以使用: var ps = Ext.select(p);