extjs学习总结

sencha -sdk F:\SvnCodeManage\repository\ext-6.0.0-gpl generate app extjs F:\SvnCodeManage\repository\aa



extjs 学习资料
1、onReady 定义在onReady内的语句块会在页面上下文加载完毕后执行
2、define 定义一个类
3、createc初始化一个类的实例
4、extjs项目中自定义extjs文件加载路径
5、maven的bundle插件配置



创建extjs的资料
http://m.blog.youkuaiyun.com/blog/tang745163962/42915347

需要处理的问题有
1、extjs采用的开放方式 extjs mvc
2、extjs加载模式


extjs 的应用程序的路口是
1、在apps.js中定义mainView的默认加载的页面
       /*extjs的主入口*/
    mainView: 'extjs6.view.main.Main'
    还有另外一种方式来实现创建默认主页
  launch: function() {
    Ext.create('TestApp.view.main.Main');
  }


2、extjs6不建议使用多页面加载，采用单个页面加载模式
3、reuires作用
   requires主要实现异步加载js文件
    requires: [
        'extjs6.view.main.Main'
    ]
    上面的代码表示异步加载extjs6.view.main.MainController控制器
4、spring mvc
Ext.application({
    name: 'FV',

    // All the paths for custom classes
    paths: {
        'Ext.ux': '../../../examples/ux/'
    },

    // Define all the controllers that should initialize at boot up of your application
    controllers: [
        'Articles',
        'Feeds'
    ],
    
    autoCreateViewport: true
});
5、extjs alias别名的作用

6、autoCreateViewport的作用
   //自动创建的Viewport的类名,文件在 app/view/main/Main.js  
   autoCreateViewport: 'app.view.main.Main'
7、extjs的类库加载模式有两种
  a、通过手工指定各个js和css
  <link rel="stylesheet" type="text/css" href="lib/theme-neptune-all.css">
  <script type="text/javascript" src="lib/ext-all.js"></script>
  <script type="text/javascript" src="lib/theme-neptune.js"></script>
  <script type="text/javascript" src="app.js"></script>
  b、通过bootstrap.js实现加载，通过这种方式无法进行多页面的加载，需要手工修改bootstrap.js中文件加载路径为绝对路径
8、routes作用
    routes: {
        'main': 'onMain'
    },
9、onButtonMain作用
    onButtonMain: function() {
        this.redirectTo('main');
    },
10、view
    一般情况下一个view对应三个文件
    modle
    view
    controller

11、学习途径
   github
   csdn
12、classic和modern区别
  classic主要用于pc端的开发
  modern用于移动端的开发，若只是在pc端开发可以删除掉该目录
13、extjs运行的顺序
   1、index.html为引导页
   2、运行bootstrap.js文件
   3、运行app.js
   4、运行application.js
   5、执行view / contrller 程序
14、main.js与mainController.js的区别
   在app\controller目录下有Main.js和root.js两个文件，这两个文件都只有简单的定义，没有具体的执行代码。
   可以预想，在5的开发中，Main.js的主要作用是作为视图之间的数据传递之用。
   而root.js，根据注释主要作用是用来定义路由。
15、alias
    Ext.define('extjs6.view.main.MainController', {
        extend: 'Ext.app.ViewController',

        alias: 'controller.main',
    其中controller.main相当于extjs6.view.controller.Main
16、实现与后台数据交互的异步加载
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
17、extjs mvc需要以下几个文件夹
    1、controller
    2、model
       模型层
    3、store
       store一般作为数据仓库，不是extjs必须的文件夹
    4、view

1、Main.js文件如何实现
2、MainController与main区别
3、实现如何刷新已经修改的js脚本
4、alias字段作用如何
   alias : 相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:
    Ext.define('SimplePanel', {  
        extend: 'Ext.panel.Panel',  
        alias: ['widget.simplepanel_007','widget.simplepanel_008'],  
            title: 'Yeah!'  
    });  
      
    //通过Ext.widget()创建实例  
    Ext.widget('simplepanel_007',{  
        width : 100,  
        height : 100  
    }).render(Ext.getBody());  
      
    //通过xtype创建  
    Ext.widget('simplepanel_007', {  
        width : 100,  
        items: [  
            {xtype: 'simplepanel_008', html: 'Foo'},  
            {xtype: 'simplepanel_008', html: 'Bar'}  
        ]  
    }).render(Ext.getBody());  

   注意：对于view类的创建，我们需要定义alias，这是为了方便我们通过xtype来创建该组件的实例。（如果没有alias，我们将很难在viewport和controller中使用 —— 这是我爬过的坑！）
5、viewport.js是做什么的
6、controller作为连接model、store和view的桥梁，在mvc开发模式中起到了至关重要的作用。如果说model定义了数据模式、store提供了数据存取的方法、view用来展示数据，那么controller将用来控制具体的数据操作。
   视图元素包括View、viewcontrollers和viewModels应该放置在一个文件夹下，方便管理
7、说明
   官方把m