extjs data

Ext.Ajax.request 请求数据
Ext.data.JsonP.request
extjs 组件对象提供了默认的load 方法 ElementLoader(update 更新) 和Ext.ComponentLoader(renderer 更新)

proxy 代理 是整合 model reader writer
reader Ext.data.reader.Xml|Json|Array 数据转换为模型
writer Ext.data.writer.Writer|XmlJson 模型转换为数据
model 对象或者实体对应数据库中的一条记录。 基本元素字段,关系,验证。
store 模型的集合,用于数据与展示层的分割

Ext.data.Model

  1. 自定义字段类型和字段排序类型。
    默认排序类型
    默认类型 AUTO STRING INT FLOAT BOOL DATE
    方法 convert sortType type
 //自定义数据类型
          Ext.data.Types.YUAN={
                    convert:function(v,data){
                        v = (v !== undefined && v !== null && v !== '') ? parseFloat(v) :  0;
                        return Ext.String.format("¥{0}",Ext.Number.toFixed(v,2));
                    },
                    sortType: function(v){
                        return parseFloat(v.replace(/¥/,""),10);
                    },
                    type: 'yuan'            
          };

 //自定义排序类型
           Ext.apply(Ext.data.SortTypes, {
                asCountry: function(v){
                    return v.country;
                }    
            });
  1. 自定义模型
//自定义校验格式
Ext.apply(Ext.data.validations,
                      {
                        emailMessage:'请输入正确的邮件',
                        email:function(config,value){
                            return !!(/^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-za-z]){2,6}$/.test(value));
                        }
                        }
              ); 

 Ext.define('Feedback',{
                 extend:'Ext.data.Model',
                 fields:[
                         {name:'name',type:'string'},
                         {name:'email',type:'string'}
                         ],
                  validations:[{type:"email",field:'email'}]       
             });

 //创建模型 ModelManager 实例化数据模型 使用校验
             var fb=Ext.ModelManager.create({name:'12',email:'sdf'},'Feedback');
             var err=fb.validate();
             console.info(err.isValid());
             console.dir(err.getByField('email'));
  1. 创建模型的方法
     //创建数据模型的三种方法
             var fd1=Ext.create("Feedback",{name:'create',email:'sdf'});
              var fd2=Ext.ModelManager.create({name:'ModelManager',email:'sdf'},'Feedback');
              var fd3=new Feedback({name:'Feedback',email:'sdf'});
              console.info(fd1);
              console.info(fd2.get("name"));
              console.info(fd3);
  1. 模型加载数据
 var fdmodel=Ext.ModelManager.getModel("Feedback");
              fdmodel.load(1,// 模型中id 属性对应的值,默认为id
                      {
                  url:"fdmodel.js",
                  success:function(m){
                      console.info(m);
                  },
                  scope:this
              });
  1. 模型加载数据
 var pstore=Ext.create("Ext.data.Store",{
                  model:'Products',
                  autoLoad:true,
                  pageSize:20,
                  proxy:{
                      type:'ajax',
                      url:'productData.js',
                      reader:{
                          type:'json',
                          root:'data'
                      },write:{
                          type:'json'
                      }
                  },
                  storeId:'ProductStore'
              })

 var ps=Ext.StoreManager.get("ProductStore");
              console.log("ProductStore:");
              console.dir(ps);
              setTimeout(function(){
                  ps.sort('ProductName');//排序
                  ps.filter('ProductName','dff');
              },3000);

你可能感兴趣的:(ExtJs)