自学ExtJS(1) 认识使用sdk

最新推荐文章于 2019-09-05 12:19:58 发布

marxist2010

最新推荐文章于 2019-09-05 12:19:58 发布

阅读量155

点赞数

分类专栏： ExtJS 文章标签： EXT ITeye 金山 CSS 资讯

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

[img]http://dl.iteye.com/upload/attachment/476609/8b5d54fc-a61c-3eff-8196-a2d34c5a44ab.png[/img]
[table]
|其中：adapter 提供对其他优秀ajax框架的支持开发中引用此包下的[color=red]ext-base.js[/color]|
| docs api帮助文档
|
| example 实例
|
| resources Ext的所有样式资源，必不可少。引用[color=red]resources/ext/css/css-all.css[/color]|
| src 源码
|
| pkgs 编译后的源代码
|
| [color=red]extjs-all.js[/color] 全功能版本引用|
[/table]

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

[img]http://dl.iteye.com/upload/attachment/476644/a49a156c-0cba-39f8-9a6d-826a42885f8c.png[/img]
再说下上图api中各个图标的含义

[img]http://dl.iteye.com/upload/attachment/476650/0911e8c5-f78a-30c1-8350-e6d9d2d2b985.png[/img]
现在我们在搜索框中索引formPanel之后打开，以下效果图是其中的右上角部分

[img]http://dl.iteye.com/upload/attachment/476659/d22a1b8f-6476-3bb1-9622-7cf0c9d151d2.png[/img]
其中：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>