zoukankan      html  css  js  c++  java
  • Extjs相关知识点梳理

     

    store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表
    方法:不列举继承来的方法
    Store( Object config )
    构造,config定义为{
    autoLoad : Boolean/Object,    //自动载入
    baseParams : Object,    //只有使用httpproxy时才有意义
    data : Array,        //数据
    proxy : Ext.data.DataProxy,//数据代理
    pruneModifiedRecords : boolean,//清除修改信息
    reader : Ext.data.Reader,    //数据读取器
    remoteSort : boolean,    //远程排序?
    sortInfo : Object,    //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
    url : String,        //利用url构造HttpProxy
    }

     

    filterBy( Function fn, [Object scope] ) : void
    更强悍的过滤方法.fn接收两个参数record和id
    find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
    找到符合条件的第一条记录,参数同filter
    findBy( Function fn, [Object scope], [Number startIndex] ) : Number
    参见filterBy
    getAt( Number index ) : Ext.data.Record
    getById( String id ) : Ext.data.Record
    依充号/id得到record对象

     

    load( Object options ) : void
    由指定的Proxy使用指定的reader读取远程数据

     

    loadData( Object data, [Boolean append] ) : void
    用法比load简单一点,目的是一样的,只是这次数据由本地读取

    reload( [Object options] ) : void
    重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数


    http://blog.csdn.net/xiaohewoai/article/details/4091604

    ExtJS本质上也是一个AJAX的框架,但是它和DWR有很大不同,首先,DWR是JAVA世界的产物,而ExtJS是后台无关的。也就是说,ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次,DWR只关注客户端与服务器端的交互,没有自己的界面组件,而ExtJS最让人惊叹的就是其丰富而强大的界面组件,除此以外,它自身也能轻松地异步访问后台组件。

    1.      首先是init-main.js,这里定义了整个应用的主体布局视图Viewport。它和我们HTML中的frameset有点类似。在我们的主显示区里还放了一个TabPanel,这就是我们桌面应用中常见的选项面板。要理解下面的JS呢,你必须先掌握JSON这种数据格式,这个格式我在前面的ExtJS应用中已经详细讲过,如果还不太清楚,到http://www.json.org/json-zh.html 去看看,JSON在整个ExtJS体系里占有重要地位,熟悉JSON格式的人会对名/值对,{},[]很敏感。大家看到,在Viewport类和TabPanel类里都传入一个JSON对象来初始化整个组件。其次,你还要有容器和组件的概念,每个容器组件(容器同时也是组件,这是相对的,它放东西的时候是容器,被放置其中的时候就是组件!)都有一个items参数指定一个JSON数组来表明自己容纳的组件。

     

     

     

    http://www.cnblogs.com/hannover/archive/2009/09/09/1563671.html

    http://www.cnblogs.com/hannover/archive/2009/09/09/1563673.html
    DAO里操作的主要是POJO类,而在我们的Service里面要做的就是DTO和POJO的转化工作。因为表现层的代码只会直接和DTO打交道。这就是严格的JavaEE分层。说到这里,可能有人开始迷惑了。我们这里说明一下:在javaEE企业级开发中,我们一般提倡四层架构体系:WEB表现层->业务逻辑层(服务层)->持久层(数据访问层)->数据库层,我们这里分别使用Struts,Spring,Hibernate来充当前三个层次的框架。一般我们把Action归为Struts所在表现层,Service归为Spring所在业务逻辑层(实际上,Spring是一个系统级别的框架,它的内涵和外延都比另外两个框架要来的大!),DAO归为Hibernate所在持久层,而在每一层上都有特定的传值组件(呵呵,有人不喜欢用大词,通俗点说,所谓传值组件在javaEE体系中就是在页面和数据库之间帮忙传递数据的用JAVA写的类!),我们自动,Struts里有ActionForm,Hibernate里有POJO,那在Spring管辖的业务逻辑层,主要就是DTO。所以我们的数据经常在这3个传值组件之间传递。

     

    这里create和convert的配置大家注意下,所谓create就是创建一个JavaScript类和Java类的关联映射。我们这里只有一个创建器,它会在客户端本地动态生成一个houseService.js文件,然后它对应Spring框架管理的一个名为houseService的Bean,主要客户端只要引用houseService.js这个文件,就能调用到服务器端houseService的方法。那么,要是我只想向外界公开少数几个方法呢?(涉及到安全问题),我们就可以用include配置了。那么,这不就行了吗?还需要convert干什么呢?恩,等一下。如果我们要在服务器端给客户端传递一个DTO对象,或者是放置着若干DTO对象的集合对象时。或者反过来,我们在客户端给服务器端传递一个JavaScript对象时。DWR怎么做JavaScript对象和DTO对象之间的解析?如果你不给它相关信息,它是做不到的,这就是convert的作用了。也就是说,create指定的对象被创建,convert指定的对象(客户端和服务器端之间携带传递的参数)被转换!

     

     

     

    http://www.cnblogs.com/hannover/archive/2009/09/09/1563664.html


    ExtJs4.1:取得一个已存在Store的reference

    //取得'StoreXiang'的reference 
    var StoreXiang = Ext.data.StoreManager.lookup('StoreXiang');  

    *  取得Srore的reference,并将其赋给gridPanel的store属性:

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        400,
        renderTo: Ext.getBody()
    });

    http://blog.csdn.net/bq_cui/article/details/8527841

     

    在4系中,grid的类是Ext.grid.Panel,由两个必要的部分组成:Store和columns,其中Store为Ext.data.Store或者Ext.data.DirectStore对象的实例,columns为Ext.grid.Panel实例的属性。

     

    一个最简单的grid:

    测试网页:test.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
        <title></title>
    
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    
        <script src="ext/ext-all.js" type="text/javascript"></script>
    
        <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    
        <script src="js/test.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    
    </body>
    
    </html>
    
    test.js
    
    Ext.onReady(function() {
    
      Ext.create('Ext.data.Store', {
    
          storeId:'simpsonsStore',
    
          fields:['name', 'email', 'phone'],
    
          data:{'items':[
    
              {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
    
              {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
    
              {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
    
              {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            
    
          ]},
    
          proxy: {
    
              type: 'memory',
    
              reader: {
    
                  type: 'json',
    
                  root: 'items'
    
              }
    
          }
    
      });
    
      
    
      Ext.create('Ext.grid.Panel', {
    
          title: 'Simpsons',
    
          store: Ext.data.StoreManager.lookup('simpsonsStore'),
    
          columns: [
    
              {header: 'Name',  dataIndex: 'name'},
    
              {header: 'Email', dataIndex: 'email', flex:1},
    
              {header: 'Phone', dataIndex: 'phone'}
    
          ],
    
          height: 200,
    
           400,
    
          renderTo: Ext.getBody()
    
      });
    
    })

    这是一个最简单的grid实现过程,使用memoryProxy在内存中读取json数据,只有数据显示功能。通常情况下,我们不会把grid直接渲染到body,而是到另外的container,所以herght、width、renderTo属性不是必须的。必须有的两个属性分别是store和columns。其中columns直接在Ext.grid.Panel实例化时通过Ext.create参数设置,store为Ext.data.Store或者Ext.data.DirectStore的实例,通常使用Ext.data.StoreManager.lookup()函数搜索StoreManager中注册的storeId得到。也可以指定实例名称,效果完全相同,方法如下:

    Ext.onReady(function() {
    
          var simpsonsStore =  Ext.create('Ext.data.Store', {
    
          fields:['name', 'email', 'phone'],
    
          data:{'items':[
    
              {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
    
              {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
    
              {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
    
              {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            
    
          ]},
    
          proxy: {
    
              type: 'memory',
    
              reader: {
    
                  type: 'json',
    
                  root: 'items'
    
              }
    
          }
    
      });
    
      
    
      Ext.create('Ext.grid.Panel', {
    
          title: 'Simpsons',
    
          store: simpsonsStore,
    
          columns: [
    
              {header: 'Name',  dataIndex: 'name'},
    
              {header: 'Email', dataIndex: 'email', flex:1},
    
              {header: 'Phone', dataIndex: 'phone'}
    
          ],
    
          height: 200,
    
           400,
    
          renderTo: Ext.getBody()
    
      });
    
    })

    也可以通过4系最新提供的Ext.define函数首先定义自己store类,先不实例化,在Ext.grid.Panel实例化过程中实例化store,优势是可以根据需要实例化相应的store,节省资源。

    可以通过4系提供的new()函数实例化store,如下:

    Ext.onReady(function() {
    
      Ext.define('simpsonsStore',{
    
        extend:'Ext.data.Store',
    
        fields:['name', 'email', 'phone'],
    
        data:{'items':[
    
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
    
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
    
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
    
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}            
    
        ]},
    
        proxy: {
    
            type: 'memory',
    
            reader: {
    
                type: 'json',
    
                root: 'items'
    
            }
    
        }
    
        });
    
      
    
      
    
      Ext.create('Ext.grid.Panel', {
    
          title: 'Simpsons',
    
          store: new simpsonsStore,
    
          columns: [
    
              {header: 'Name',  dataIndex: 'name'},
    
              {header: 'Email', dataIndex: 'email', flex:1},
    
              {header: 'Phone', dataIndex: 'phone'}
    
          ],
    
          height: 200,
    
           400,
    
          renderTo: Ext.getBody()
    
      });
    
    })

    最简单,也是最基础的使用方法就是上面这个了,今天就说这么多,明天说说columns的设置。



    其它

    http://www.cnblogs.com/zhangwei595806165/archive/2012/12/13.html

  • 相关阅读:
    vue项目搭建
    iview在ie9及以上的兼容问题解决方案
    中山大学校队内部选拔赛试题试题2【New Year Gift】--------2015年2月8日
    中山大学校队选拔赛第二试题试题3【Compressed suffix array】-------2015年2月8日
    ZOJ2812------2015年2月4日
    C++STL泛型编程基础知识讲解--------2015年2月3日
    中山大学校队选拔赛第一章题4【简单数迷Simple Kakuro】-------2015年1月28日
    UVALive
    UVA11375【火柴拼数Matches】-------2015年1月27日
    递推关系的运用加简单DP【UVA11137Ingenuous Cubrency】-------2015年1月27日
  • 原文地址:https://www.cnblogs.com/softidea/p/3312623.html
Copyright © 2011-2022 走看看