Ext JS4.0 的一点学习思路

最新推荐文章于 2022-03-30 14:09:14 发布

GoodDao

最新推荐文章于 2022-03-30 14:09:14 发布

阅读量2.8k

点赞数

分类专栏： Web View 文章标签： ext extjs stylesheet forms html jsf

本文链接：https://blog.csdn.net/origin100/article/details/7471500

版权

Web View 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

不是我不明白，而是世界变化的太快。
记得在08年一次前端技术选型的时候，当时还在考虑ExtJS还是JSF？虽然现在已经记不清当时选择JSF具体原因。最近偶然的机会看了ExtJS Demo着实吃惊不小。变化太大，成长太快了。
ExtJS 可以理解为一个可以打造富客户端的JS框架，对HTML原生标签，进行更高效的封装。下面简单说说学习ExtJS4.0的一点思路，各人情况不同，不足之处欢迎指正，相互提高。（前提最好有一定javascript基础）
【源码包下载】
源码下载建议大家google：extjs 找到官方链接，这里不给出具体地址，地址有可能会变。解压目录，例：C:/extjs/extjs4
【example部署】建议安装Apache HTTP Server 配置安装目录conf/httpd.conf 文件

<VirtualHost 127.0.0.231:80>
 DocumentRoot C:/extjs/extjs4
 ServerName 127.0.0.231:80
</VirtualHost>
<Directory "C:/extjs/extjs4">
    Options Indexes FollowSymLinks Multiviews
    AllowOverride All
    Order Allow,Deny
    Allow from all
</Directory>

配置完成，启动apache服务，通过浏览器可以访问：http://127.0.0.231

View the Examples :查看官方例子
API Docs :API 文档
【例子学习】可以对照例子，有一个感性认识。例如，看看examples/form/的例子

Dynamic Forms对应在目录example/from查看相关文件dynamic.html和dynamic.js，用 Notepad++打开。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Dynamic Forms built with JavaScript</title>

    <!-- ExtJS 引入CSS样式文件 启动js文件-->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- Example 示例JS文件-->
    <script type="text/javascript" src="dynamic.js"></script>
</head>
<body>

</body>
</html>

下面是部分js

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel'
]);


Ext.onReady(function(){

    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});


    var simple = Ext.create('Ext.form.Panel', {
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },

        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, {
            xtype: 'timefield',
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);
// 省略
});

效果：