jayyanzhang2010 发表于 2013-1-29 09:30:03

开始使用ExtJS

Ext本身包括了很多界面元素,这些界面元素的显示特性由样式文件来定义,使用Ext框架时先要引入ExtJS的样式文件。
引入ExtJS的样式文件
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-3.2/resources/css/ext-all.css" />
ExtJS核心是一个javascript库,因此,我们先要引入Ext的javascript库存文件。ext的JS库文件分成两部分,一个是适配器adapter,其中定义了事件处理、动画效果等底层的API,Ext提供了几种适配器,jquery、prototype、yui及Ext自生的适配器。
引入ExtJS的脚本库
<script type="text/javascript" src="plugins/extjs/ext-3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-3.2/ext-all.js"></script>

把extjs的样式及js库文件引入到页面后,就可以开始使用extjs来开发应用程序界面。Ext提供了一个Ext类,在我们的js程序中,直接调用Ext.onReady来开始使用Ext应用界面。ExtJS版Hello World示例:
Ext应用代码:使用Ext.onReady来调用ExtJS组件
Ext.onReady(function(){
var win= new Ext.Window({title:"很cool的窗口",width:500,height:400,buttons:[{text:"确定"},{text:"取消"}]});
win.show();
})

当然,最好是把自己的js程序放独立的js文件中,然后使用script标签引入,这样便于开发及管理。示例,把脚本代码移植到独立的js文件中。

Ext 应用骨架代码:
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function(){
…///在这里面创建及使用ext控件。
});
</script>
页: [1]
查看完整版本: 开始使用ExtJS