zoukankan      html  css  js  c++  java
  • ExtJs学习笔记(1)---ExtJs安装及其使用

    从官网下载了ExtJs的3.2版本号的SDK,包括了代码依赖的具体说明、文档、范例和其它文件。当中,adapter和resources文件是Ext正常执行所必须的,其它的仅在开发过程中使用到。

    Adapter:支持把Ext和其它代码库一同使用的文件

    build:用于自己定义构建ext-all.js的文件

    docs:文档中心(仅当执行在server上时可以正常訪问)

    examples:大量令人印象深刻富有洞察力的范例

    resources:Ext依赖的文件,比如CSS和图片

    source:ext的全部代码

    在使用Ext之前,我们须要如今页面中引入Ext的库文件,为了达到这个目的,我们须要在HTML页面的head标签区域内引入刚才下载的SDK文件。

    <html>
    <head>
    <title>ExtJs起步</title>
    <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
    <script src="lib/extjs/adapter/ext/ext-base.js"></script>
    <script src="lib/extjs/ext-all-debug.js"></script>
    </head>
    <body>
    <!--nothing in the body-->
    </body>
    </html>
    Ext文件的引用路径必须是正确的。而且是HTML页面的相对路径。

    这些文件必须依赖一下的顺序一次引入。

    1.ext-all.css  Ext中基本的CSS文件

    2.外部JS库文件 假设有须要能够引入

    3.ext-base.js Ext代码库的“适配器”

    4.ext-all.js或者ext-all-debug.js 基本的Ext代码库文件

    5.在这个位置引入主题文件,也能够在Ext基本的CSS文件引入后的任何位置引用。


    前提知识已经准备完成了,開始进行我们的第一个ExtJs页面的编写了。

    <html>
    <head>
    <title>ExtJs起步</title>
    <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
    <script src="lib/extjs/adapter/ext/ext-base.js"></script>
    <script src="lib/extjs/ext-all-debug.js"></script>
    <script>
    	Ext.onReady(function(){
    		Ext.Msg.alert('Beyole','Hello World');
    	});
    </script>
    </head>
    <body>
    <!--nothing in the body-->
    </body>
    </html>

    程序截图:

    效果还是非常好看的,并且这个对话框是能够任意拖拽的,当然仅仅限制在页面的区域内,由于这毕竟不是真正的对话框,而是一系列DIV标签和图片的组合模拟而成的。

    这样以后写出的HTML的前台效果就非常好了。

  • 相关阅读:
    【可能是】退役记
    cf3
    react使用antd的Autocomplate时,给onSearch运用lodash的防抖debounce不生效
    依赖项useEffect的执行顺序问题
    AppleDoc 介绍
    AppleDoc 安装步骤
    AppleDoc 使用介绍
    GetKernel32Moudle and GetProcAddress
    TLS回调函数无效
    新的博客地址
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6934352.html
Copyright © 2011-2022 走看看