ExtJS 4的开发方式与ExtJS 3.x的开发有很多区别,但还兼容以往的开发方式。
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
1,ExtJS 4里创建一个类,推荐用Ext.define()方法,例如:
Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
height: 251,
width: 448,
title: 'My Grid Panel',
});
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
height: 251,
width: 448,
title: 'My Grid Panel',
});
创建类也可以用Ext.create(),语法与上面相同,和Ext.define()的区别在于Ext.define()方法支持重写。
可参见Ext.define()方法的文档。
2,开发一个ExtJS 4程序(指一个页面内执行),方法是创建一个index.html或app.html,内容如下:
<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Account Manager</title><link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="ext-4.0/locale/ext-lang-zh_CN.js"></script>
</head>
<body></body>
</html>
</head>
<body></body>
</html>
其中在当前目录创建子目录ext-4.0,把ExtJS 4下载里的resources和src子目录都拷贝进去,还包括ext.js和ext-debug.js,如果汉化还可以拷贝ExtJS 4下载里面的
locale/ext-lang-zh_CN.js
然后创建app.js,内容如下(前面加粗的表示是动态加载,如果调用中出现找不到类,就在require里加):
Ext.Loader.setConfig({
enabled: true
});
Ext.require(['Ext.chart.*','Ext.view.*','Ext.panel.*','Ext.picker.*']);
enabled: true
});
Ext.require(['Ext.chart.*','Ext.view.*','Ext.panel.*','Ext.picker.*']);
Ext.application({
name: 'AM',
appFolder: 'app',
controllers:[
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist'
}
]
});
}
});
name: 'AM',
appFolder: 'app',
controllers:[
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist'
}
]
});
}
});
第一次要产生的页面内容就写在launch方法里面,在当前目录的名为app的子目录下(appFolder属性默认值也是'app',可省略),自动将controller, model, store, view这些子目录名字映射到controllers, models, stores, views 这些属性的字符串数组里,并且支持加'.'表示子目录,例如:
controllers:[
'Users'
]
'Users'
]
表示 controller/Users.js里面有名为AM.controller.Users的类('AM'是命名空间的名字,约定首字母大写)。
而
views: [
'user.Edit',
'user.List'
]
'user.Edit',
'user.List'
]
表示 views/user/Edit.js和views/user/List.js里有名为AM.view.user.Edit和AM.view.user.List的类。
以上可参考ExtJS 4文档Guides中的"MVC Application Architecture"一文。