• 2012/7/26Extjs学习笔记


    ①Extjs中有一个名为Record的类,表格等控件中使用的数据是存放在Record对象中,一个人Record可以理解为关系数据表中的一 行,也可以称为记录。Record对象中即包含了记录(行中的各列)的定义信息。也就是该记录包含哪些字段,每一个字段的数据类型等。同时又包含了具体的 记录信息,也就是各个字段的值。

    看代码:

     1  <script>
     2    Ext.onReady(function(){
     3    var record = Ext.data.Record.create([
     4    {name:'title'},
     5    {name:'username',mapping:'author'},
     6    {name:'loginTimes',type:'int'},
     7    {name:'lastLoginTime',mapping:'loginTime',type:'date'}
     8    ]);
     9    var r =new record({
    10        title:'日志标题',
    11        username:'cnblogs',
    12        loginTimes:100,
    13        loginTime:new Date()
    14    });
    15    alert(record.getField("username").mapping);
    16    alert(record.getField("lastLoginTime").type);
    17    alert(r.data.username);
    18    alert(r.get('loginTimes'));
    19         
    20        });
    21    </script>

    通过Ext.data.Record.create()方法创建一个record类。record类取得其内数据的方法为getField()。而record对象取得其数据的方法可以为r.data.name的方式,也可以是r.get('name')的方式。

    另外,r.set(name,value)可以设定记录中某指定字段的值,r.dirty可以得到当前记录是否有字段的值被更改过等等。

    ②Store 可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在Extjs中,GridPanel、ComboBox、DataView等控件 一般直接与Store打交道,直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record,同时Store又包含了数据来源, 数据解析器等信息,Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形 式保存在Store中,作为其他控件的数据输入。

    数据存储器由Ext.data.Store类定义,一个完整的数据存储器要知道数据源及数 据解析方式(DataReader)才能工作,在Ext.data.Store类中数据源由Proxy配置属性定义、数据解析(读取)器由reader配 置属性定义,一个较为按部就班的创建Store代码如下:

       <script>
       alert(r.get('loginTimes'));
       Ext.onReady(function(){
    	var record = Ext.data.Record.create([
    		{name:'title'},
    		{name:'username',mapping:'author'},
    		{name:'loginTimes',type:'int'},
    		{name:'lastLoginTimes',mapping:'loginTime',type:'date'}
    	]);
    	var dataProxy = new Ext.data.HttpProxy({url:'link.ejf'});
    	var theReader = new Ext.data.JsonReader({
    		totalProperty:'results',
    		root:'rows',
    		id:'id'
    	},
    	record
    	);
    	var store = new Ext.data.Store({
    		proxy:dataProxy,
    		reader:theReader
    	});
            
       	});
       </script>
    

     可以看到,这样的代码太冗杂,Store本身提供了一些快捷创建Store的方式,比如上面的代码可以不用先创建一个HttpProxy,只需要在创建Store的时候指定一个url配置参数,就会自动使用HttpProxy来加载参数。比如上面的代码可以简化成:

     1   <script>
     2    
     3    Ext.onReady(function(){
     4     var record = Ext.data.Record.create([
     5         {name:'title'},
     6         {name:'username',mapping:'author'},
     7         {name:'loginTimes',type:'int'},
     8         {name:'lastLoginTimes',mapping:'loginTime',type:'date'}
     9     ]);
    10 //    var dataProxy = new Ext.data.HttpProxy({url:'link.ejf'});
    11     var theReader = new Ext.data.JsonReader({
    12         totalProperty:'results',
    13         root:'rows',
    14         id:'id'
    15     },
    16     record
    17     );
    18     var store = new Ext.data.Store({
    19         url:'link.ejf',
    20         proxy:dataProxy,
    21         reader:theReader
    22     });
    23     store.load();     
    24        });
    25    </script>

    上面代码虽然不需要再手动创建HttpProxy了,但是仍然需要创建DataReader等,代码量并未实质减少。

    Extjs进一步把这种常用的数据存储器进行了封装,在Store类的基础上提供了SimleStore、GroupingStore等,直接使用SimpleStore,则上面代码可以进一步简化:

    var store =new Ext.data.SimpleStore({

      url:'link.jsp',

      totalProperty:'results',

      root:'rows',

      fields:['title',{name:'username',mapping:'author'},

      {name:'loginTimes',type:'int'},

      {name:'lastLoginTime',mapping:'loginTime',type:'date'}

    ]

    });

    store.load();

  • 相关阅读:
    路由重分发 最重要 最难 ccnp
    (01)Zookeeper简介
    (01)kafka以及消息系统的基本介绍
    (05)使用kafka脚本发送消息和接收消息
    (04)kafka多机多Broker(集群)的基本配置
    (03)kafka单机多Broker(伪分布式)的基本配置
    (02)安装配置kafka单Broker及其基本操作
    (02)安装zookeeper集群
    (09)使用xshell工具查看redis客户端,汉字显示乱码解决方法
    (08)redis之使用java客户端、spring连接redis、redis集群示例
  • 原文地址:https://www.cnblogs.com/howlaa/p/2610865.html
Copyright © 2020-2023  润新知