自学ExtJS(1) 认识使用sdk

Marxist_1943

浏览: 13782 次
性别:
来自: 北京

最近访客更多访客>>

521冰521

gaomingke

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT ITeye 金山 CSS 资讯

    个人接触ExtJS也不是很久,走了很多弯路，谨以此系列文章献给要学习Ext的朋友，同时希望web前端大牛给予学习方面的指导、帮忙梳理知识架构，本人关注前段开发，关注用户体验。
学习前准备:
    1.下载ExtJS开发包:
        http://extjs.org.cn/ 这里是ExtJS中文资讯站，包括您能用到的各种资源预览、下载。
    2.如果您的英语很是让人胃疼，那请安装金山词霸等电子词典，以方便解读ExtJS api帮助文档。
    3.找一个活跃的ExtJS论坛，如果说api最大的推手，那么论坛讨论则是解决问题最有效率的办法。

一切都从ExtJS sdk开始:
    1.认识开发包的目录结构，我这里用的是3.2.1版本

其中：adapter 提供对其他优秀ajax框架的支持开发中引用此包下的ext-base.js

docs api帮助文档

example 实例

resources Ext的所有样式资源，必不可少。引用resources/ext/css/css-all.css

src 源码

pkgs 编译后的源代码

extjs-all.js 全功能版本引用

2.认识api也就是开发包中的docs文件
由于ExtJS查看api需要HTTP环境，所以需要把下载的开发吧部署到web服务器上。如果您做不到，那好，我在附件里提供给您一个中文版chm格式的帮助文档。

再说下上图api中各个图标的含义

现在我们在搜索框中索引formPanel之后打开，以下效果图是其中的右上角部分

其中：Config Options 配置可选项，相当于java中的构造参数
      Properties 属性
      Methods 方法
      Events 事件
    3.实例讲解api用法

<html>
	<head>
		<link rel=stylesheet href="ext-3.2.1/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
	    <script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
	</head>
	<body>
		<script language="javascript">
		Ext.onReady(function fun(){
			var _button = new Ext.Button({
				 // 渲染到相应的dom节点
			     renderTo:'div1',
				 // 配置可选项 text
				 text:'确定',	
				 // 侦听事件
				 listeners:{
					'click':function fun(){
					   // 不好用，说明text是只读的配置可选项，而不是属性
					    _button.test="取消"
					   // 类似于java的私有赋值，这里用到set方法
						_button.setText("取消") 
					}
				 }
			})
		})
		</script>
	</body>
	<div id="div1"></div>
    注：此函数包含了可选项的配置，属性的修改，事件的侦听以及方法的作用。掌握了这四项的用法，你就可以阅读api,自己构造函数了。
</html>

这一章就到这里，主要是希望读者能认识sdk,学会使用api,掌握了api你就可以自力更生啦。