extjs学习教程一--什么是extjs

最新推荐文章于 2018-09-10 08:01:55 发布

wenph2008

最新推荐文章于 2018-09-10 08:01:55 发布

阅读量769

点赞数

分类专栏： ExtJS

本文链接：https://blog.csdn.net/wenph2008/article/details/41174321

版权

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

曾经努力走进一个人的心，现在却努力帮那人忘却，虽然方向不一样，但依旧在努力着，生命不息，奋斗不止~

一、认识ExtJS
extjs是使用javascript、css和html等技术实现的主要用于创建用户界面，且与后台技术无关的前端ajax框架。
extjs来源于yui，开发理念来源于传统的桌面软件开发。

1.下载extjs，解压，得到目录结构
builds：是extjs压缩后的代码，体积更小，加载更快
docs ：extjs的文档
examples：官方示例
locale：多国语言的资源文件
overview：extjs的功能简述
pkgs：extjs各部分功能的打包文件
resource：extjs要用到的图片文件与样式文件。
src：未压缩过的代码目录
bootstrap.js：extjs库的引导文件
ext-all.js ：必须引入的核心库
ext-all-debug.js：ext-all.js的调试版

2.也从hello world开始（extjs 4.2）

<HTML>
 <HEAD>
  <TITLE>HelloWorld</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
 });
  </script>
 </HEAD>
 <BODY></BODY>
</HTML>

3.实现工具栏和菜单栏

  <script type="text/javascript">
 Ext.onReady(function(){
        var toolbar = new Ext.toolbar.Toolbar({
            renderTo:'toolbar',
            width:300
        });
        
        var childrenMenu = new Ext.menu.Menu({
            ignoreParentClicks:true,
            items:[
                {text:'open one'},
                {text:'open two'}
            ]            
        });
        
        var fileMenu = new Ext.menu.Menu({
            shadow:'frame',
            allowOtherMenus:true,
            items:[
                new Ext.menu.Item({
                    text:'new'
                }),
                {text:'open',menu:childrenMenu},
                {text:'close'}
            ]
        });
        
        
        toolbar.add(
            {
                text:'新建',
                menu:fileMenu
            },
            {
                text:'打开'
            },
            {
                text:'保存'
            },
            '->',
            '<a href="#">link</a>',
            'text'
        );
        
 });
  </script>
 </HEAD>
 <BODY>
 <div id='toolbar'></div>
 </BODY>

4. 展现

wenph2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs学习教程一--什么是extjs

一、认识ExtJSextjs是使用javascript、css和html等技术实现的主要用于创建用户界面，且与后台技术无关的前端ajax框架。extjs来源于yui，开发理念来源于传统的桌面软件开发。1.下载extjs，解压，得到目录结构 builds：是extjs压缩后的代码，体积更小，加载更快 docs ：extjs的文档 examples：官方示例
复制链接

扫一扫

专栏目录