Extjs基础知识 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

Extjs基础知识

来源: www.bianceng.cn 阅读:

一、环境的搭建

从官网下载Extjs 4.1 的工具包,里面的东西很多,我们在开发阶段并不需要太多的东西,因此保留 了我们需要用到的最少的几个文件:

\

其中resources为资源和一些Extjs样式文件,local为语言包,Extjs4.0新增加了bootstrap.js这样一 个文件,我们可以看下它的源码来了解一下它的作用:

if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];
    
            if (host.search(test) !== -1) {
                isDevelopment = true;
                break;
            }
        }
    }
    
    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }
    
    document.write('<script type="text/javascript" charset="UTF-8" 

src="' + 
        path + 'ext-all' + (isDevelopment ? '-dev' : '') + 

'.js"></script>');

我们可以了解到,其实它的作用就是判断我们是处于开发模式还是调试模式,然后动态的给我们引入 所需要的js文件。因此如果我们需要在页面内编写Extjs,只需要为Extjs引入这样两个文件:

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/bootstrap.js"></script>

这样我们最简单的一个环境就搭建完成了。

二、Hello World

学习每个语言必定都是从Hello World开始的,在javascript中我们使用alert来弹出提示框,而在 Extjs中我们采用如下的方式:

1 (function(){
2     Ext.onReady(function(){
3         Ext.MessageBox.alert("hello","Hello World! ");
4         })
5 })();

Tags:
相关文章列表: