ExtJs4入门之一: create() 和 define()方法

最新推荐文章于 2023-04-18 23:26:22 发布

iteye_19603

最新推荐文章于 2023-04-18 23:26:22 发布

阅读量241

点赞数

文章标签： javascript ViewUI

一: hello world

1.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>Ext界面测试</title>

<!-- 1.jQuery -->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.1.min.js"></script>
<!-- 2.Ext -->
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/extjs/resources/css/ext-all.css" />
	<!-- 用ext-all.js 或者用 ext-all-debug.js
	<script type="text/javascript" src="<%=basePath %>extjs/ext-all.js"></script>-->
<script type="text/javascript" src="<%=basePath %>js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=basePath %>js/extjs/locale/ext-lang-zh_CN.js"></script>
<!-- 3.OthersJs -->
<script type="text/javascript" src="<%=basePath %>extDemo/extDemo.js"></script>
<!--<script type="text/javascript" src="<%=basePath %>systemConfig/extDemo/extEditorGridDemo.js"></script> 
<script type="text/javascript" src="<%=basePath %>systemConfig/extDemo/extPanelDemo.js"></script> -->

2.js:

Ext.onReady(function(){
	
	Ext.Msg.alert("hello","hello Ext world!");
	//"Msg"是后边完整类名的别名,相当于: Ext.MessageBox.alert("hello","hello Ext world!");
		
})

二: Ext创建对象定义类

1.先用一下原生Js中定义类和对象的方法

//==>原生Js声明类
function user()
{
	//这里this相当于其他语言的public 
	this.name = "rt";
	this.age = 24;
	//var相当于其他语言的private
	var male = "male";

	this.getMale = function(){
		return male;
	}
}
var u = new user();//实例化对象
alert(u.name + "_" + u.getMale());


//==>原生Js声明对象
var person = {
	name:"rt",
	age:24,
	getAge : function(){
		return "Age is"+ this.age;
	}
}
alert(person.name + "_" + person['age'] + "_" + person.getAge());

2.Ext中用原生Js定义window ,和系统推荐的create创建对象

	//==>1.用Js原生方法初始化window对象 ( 第一个window小写, 第二个大写)
	var win1 = new Ext.window.Window({
		height:200,
		width:300,
		title:"new出来的win"
	});	
	//对于实例化的对象, 调用方法 (不渲染是不会出现在窗体中的)
	win1.show();
	
	
	//==>2.Ext推荐使用 "create" 来实例化:
	var win2 = Ext.create('Ext.window.Window',{
		height:200,
		width:400,
		title:"create出来的win",
	});
	win2.show();

3.Ext中定义类 ( 是类而不是对象 , 类似于项目中的model )

继承是用extend(单继承)和mixins(多继承)关键字

	//==>3.Ext中创建类,而非对象( 类似于之前项目中Model )
	Ext.define("winDefined",{
		extend:"Ext.window.Window",//继承自Window

		title:"define的win",//初始属性

		initComponent:function(){
			this.callParent(arg);
		}
	});
	var winObj = Ext.create('Ext.window.Window',{height:200,width:300,title:"实例化自定义的win"});
	winObj.show();

三:Ext对原生Js的拓展

比如说下边这个例子, 类似的方法巨多

//==>对原生Js的其他拓展
Ext.onReady(function(){
	var myArray = [1,2,3,-3,-2,-1];

	Ext.Array.every( myArray ,	function(str){
		if( str > 0 )
		{
			return true;
		}
		if( str < 0 )
		{
			alert(str);
			return false;
		}
	} ,this)
})

iteye_19603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs4入门之一: create() 和 define()方法

一: hello world1.jsp&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.get...
复制链接

扫一扫