ExtJS基础入门

公司需要用ExtJS搭建系统框架,然后,这个很老了,没有用过 。

开始进行时候一脸懵逼,因为搜索了相关的知识,面临如下问题:

1.版本太多,从一到六,不知从何入手

2.提供的教程和视频都是需要下载 Sencha Cmd 和 Ruby进行操作,对于只懂前端的我来说还是优点难度的。

解决:

1.询问公司技术,下载需要的版本,是5.1.0

2.Sencha和Ruby可以不下载,他们只是可视化图形转换,编辑更容易理解而已。所以 我用webstorm这个工具进行书写,当然esclipe code也是可以。

写代码前夕,遇到问题是:

1.版本下载了,解压好之后,由于没使用推荐的工具,目录上显示一塌糊涂,根本对不上名称。

上面包括了实例,打包文件等 。主要是 example实例,packages对应的是主题包。

2.webstorm上面和其他工具不是自带Sencha ExJS的语法解析,不能自动补全和高亮显示,需要下载插件,files=>setting=>plugins=>Browse Resporities(联网下载)=>搜索Sencha ExJS下载。

解决:

1.自己搭建环境,简历一个新的文件夹,引入需要的主题包,必须的et-all.js,bootstrap.js和相关开头的css结尾的文件。

2.插件下载好之后遇到的坑就是需要注册,注册的内容需要邮箱,姓名,公司等,但是注册不了的。原因是,需要twitter的帐号名字,还有一个图片验证,因为国家网络的限制,需要翻墙,但是我试过了,翻墙也注册不上,可能是网络原因。你可以尝试下,注册登录后有30天免费使用时间。我没帐号就没使用。

自己也没使用过这个框架,只有从helloWorld做了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
  <script src="./ext/ext-all.js"></script>
  <script>
   /* Ext.application({
      name:'HelloWorldText',
      launch:function(){
        Ext.create('Ext.container.Viewport',{
          layout:'fit',
          items:[
            {
              html:'Hello ExtJS!'
            }
          ]
        });
      }
    });*/
    Ext.application({
      name:'系统管理',
      launch:function () {
        Ext.create('Ext.container.Viewport',{
          layout:'fit',
          items:[
            {
              html:'风险系统'
            }
          ]
        })
      }
    })
  </script>
</head>

<body></body>
</html>

index.html的代码,解释下:注释掉的是别人的代码,然后自己又写了一遍联系。

我的理解,引入ext.js 表明你使用了这个语法,类似于jQuery的文件引入。这个底层都有封装,实现功能。

Ext.application({                                                                  - -Ext系统配置
      name:'系统管理',                                                              --名称(没弄懂作用,页面没显示,可能是标记吧)
      launch:function () {                                                         --    加载函数
        Ext.create('Ext.container.Viewport',{                                        --Ext创建容器并显示(Ext语法部分)
          layout:'fit',                                                                --显示方式
          items:[                                                                       --项目  数组书写
            {
              html:'风险系统'                                      --    书写内容,加上html,说明显示位置     ‘风险系统’html显示名字
            }
          ]
        })
      }
    })

这时页面显示  风险系统 字体  ,打开调试工具,会发现页面结构多了很多层级,这个应该是ExtJS的封装显示了 。

ExtJS的语法类似于React中jsx写法,把内容都写成标签的形式在JS中,但是没有做到样式结构分离,他的CSS也是写在JS代码中。但是支持mvc,mvvm两种框架,版本5以后不支持ie8以下,可以在pc和移动端都有很好的流畅性。

适合做系统。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页