Extjs中创建Store数据源的方式(转)

Store简要说明请查看：http://extjs.org.cn/node/564

from :http://www.xuehuile.com/blog/list_ef64ad6c72be4d3cb3c481b34ba75023_1.html

一.本地数据源

1.数组格式的数据：data只能是数组!——不能用JsonStore,否则报错！

var arrStore = new Ext.data.SimpleStore({
    data:[
        /*{id:1,name:"zs",age:22},
        {id:2,name:"ls",age:23},
        {id:3,name:"ww",age:24}*/注释掉的是json格式的，只能用JsonStore
        [1,"zs",22],
        [2,"ls",23],
        [3,"ww",24]
    ],
    fields:["id","name","age"]
});
View Code

 

 

2.JSON格式的数据：data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!

var jsonStore = new Ext.data.JsonStore({
	data:[
		{id:1,name:"zs",age:22},
		{id:2,name:"ls",age:23},
		{id:3,name:"ww",age:24}
	],
	fields:["id","name","age"]
});

 

fields类型：

 

实例分析：

//1.设置数据源
var jsonStore = new Ext.data.JsonStore({
    data:[
        {id:1,name:"zs",age:22},
        {id:2,name:"ls",age:23},
        {id:3,name:"ww",age:24}
    ],
    fields:["id","name","age"]
});

//2.定义列
var cm = new Ext.grid.ColumnModel({
    columns:[
        {
            header:"编号",
            dataIndex:"id",
            width:100,
            sortable:true
        },{
            header:"姓名",
            dataIndex:"name",
            width:100,
            sortable:true
        },{
            header:"年龄",
            dataIndex:"age",
            width:100,
            sortable:true
        }
    ]
});



//4.创建表格面板
var grid = new Ext.grid.GridPanel({
    cm:cm,
    store:jsonStore,
    height:80,
    tbar:[
        {
            text:"增加项目",
            iconCls:"add",
            handler:function(){
                addWin.show();
            }
        },{
            text:"修改",
            iconCls:"edit"
        },{
            text:"删除",
            iconCls:"remove"
        }
    ]
});


Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.init();
    new Ext.Viewport({
        layout: 'fit',
        items: [grid]
    });
});
View Code

 

注意事项：

column中的dataIndex对应的就是fields中的字段

 

效果：



 

 

 

二.后台获取数据源

1.JsonStore：Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!

(注：API中只有结合式的写法，用proxy,reader分离式写法经测试无法解析数据！)

正确写法：

var epStore = new Ext.data.JsonStore({
    autoLoad: true,
    url:"getEProject.eva?doType=getEProject",
    root:"data",
    fields: ["project","company"]
});
View Code

 

错误写法：（此时，若将JsonStore换成其父类Store则可以正确解析！）
var epProxy = new Ext.data.HttpProxy({
    url:"getEProject.eva?doType=getEProject"
});

var epReader = new Ext.data.JsonReader({
    root:"data",
    fields: ["project","company"]
});

var epStore = new Ext.data.JsonStore({//此处若换成父类Store则解析正确
    autoLoad: true,
    proxy:epProxy,
    reader:epReader
});

 

 

2.Store：Ext.data.Store

方式一：结合式定义

var xmmcStore = new Ext.data.Store({
    proxy:    new Ext.data.HttpProxy({
                url:'getXmmc.eva?doType=getXmmc'
            }),
    /*注：此处用url代替proxy也是可以的,如下：
    url:'getXmmc.eva?doType=getXmmc',
    但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式！！！*/
    reader: new Ext.data.JsonReader({
                root: 'data' 
            },[
                { name: 'id' }, 
                { name: 'name'}
            ])
});

//此处也可将reader中的fields换简便方式定义，如下：
var xmmcStore = new Ext.data.Store({
    proxy:    new Ext.data.HttpProxy({
                url:'getXmmc.eva?doType=getXmmc'
            }),
    reader: new Ext.data.JsonReader(
            {root: 'data'},
            ['id','name']
    )
});

//proxy换成url形式：
var xmmcStore = new Ext.data.Store({
    url:'getXmmc.eva?doType=getXmmc',
    reader: new Ext.data.JsonReader(
            {root: 'data'},
            ['id','name']
    )
});
View Code

 

 

 方式二：分离式定义

var itemProxy = new Ext.data.HttpProxy({
    url:"getItem.eva?doType=getItem"
});
var itemReader = new Ext.data.JsonReader(
    {
        root:"data"
    },[
        {"name":"company"},
        {"name":"department"}
]);
var itemStore = new Ext.data.Store({
    proxy:itemProxy,
    reader:itemReader
});

此处也可将reader中的fields换简便方式定义，如下：
var itemReader = new Ext.data.JsonReader(
    {root:"data"},
    ["company","department"]
);
View Code

 

 

方式三：带Record形式：

/**方式一：分离式 Proxy + Reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
    {name:"id",type:"int"},
    {name:"xmid",type:"int"},
    {name:"subject",type:"string"},
    {name:"planCost",type:"string"},
    {name:"actualCost",type:"string"}
]);
/*2.创建Proxy*/
var costProxy=new Ext.data.HttpProxy({
    url:'getProjectCost.eva?doType=getProjectCost',
    timeout:90000
}); 
/*3.创建Reader*/
var costReader = new Ext.data.JsonReader({
    root:"data"
},costRecord);
/*4.创建Store*/
var costStore = new Ext.data.Store({
    proxy:costProxy,
    reader: costReader 
});


/**方式二：结合式 Proxy + Reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
    {name:"id",type:"int"},
    {name:"xmid",type:"int"},
    {name:"subject",type:"string"},
    {name:"planCost",type:"string"},
    {name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
    proxy:new Ext.data.HttpProxy({
            url:'getProjectCost.eva?doType=getProjectCost',
            timeout:90000
        }),
    reader: new Ext.data.JsonReader({
        root:"data"
    },costRecord)
});


/**方式三：url + reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
    {name:"id",type:"int"},
    {name:"xmid",type:"int"},
    {name:"subject",type:"string"},
    {name:"planCost",type:"string"},
    {name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
    url:"getProjectCost.eva?doType=getProjectCost",
    reader: new Ext.data.JsonReader({
        root:"data"
    },costRecord)
});


/**方式四：直接创建 JsonStore!*/————注意：这种方式只能用JsonStore,不能用父类Store
var costStore = new Ext.data.JsonStore({
    url:"getProjectCost.eva?doType=getProjectCost",
    root:"data",
    fields:["id","xmid","subject","planCost","actualCost"]
});
View Code

 

 注：url + root + fields的方式四，只能用JsonStore,不能用Store!!!

 

 

实例分析：

1.将方式一的Store放到下拉选中

2.在下拉选选中某项时加载方式二的Store

3.将加载后的数据放到文本框中显示出来

(1).创建下拉选，并监听选中事件，加载第二个store

var xmmcCombox = new Ext.form.ComboBox({
    fieldLabel:"项目名称",
    store:xmmcStore,
    displayField:"name",
    valueField:"id",
    triggerAction:"all",
    emptyText:"请选择",
    editable:false,
    listeners:{
        /*"expand":function(){
            xmmcStore.load();
        },*/
        "select":function(obj, record){
            itemStore.baseParams.xmid = record.get('id');
            itemStore.load();
        }
    }
});
View Code

 

 注：Store的传参赋值方式：store.baseParams.id/name/... = ...... 

 

(2).创建form表单：

var addForm = new Ext.FormPanel({
    frame: true,
    labelWidth: 80,
    //labelAlign: "right",
    //buttonAlign:"center",
    items:[
        xmmcCombox,
        {    
            name:"xmdw",
            xtype:"textfield",
            fieldLabel:"项目单位",
            readOnly:true,
            width:200
        },{
            name:"depart",
            xtype:"textfield",
            fieldLabel:"主管部门",
            readOnly:true,
            width:200
        }
    ]
});
View Code

 

 

(3).将第二个Store加载后的数据放到文本框中：

itemStore.on('load', function (store, record, options) {
    var comp = record[0].get("company");
    var dept = record[0].data.department;
    addForm.getForm().findField("xmdw").setValue(comp);
    addForm.getForm().findField("depart").setValue(dept);
});
View Code

 

注意事项：

1.文本框赋值方式：

1 getForm().findField("").setValue("")
2.在Store中取record：
(1).取总记录records：store.data  (注，此时若要取某下标记录，还得用records.get(i))
(2).取指定下标的record：store.getAt(i)  (注：不是get(i)或者getById(i))
2.在record中取值方式：
(1).record.data.name
(2).record.data["name"]
(3).record.get("name")   (注意：这里比前两种少了data) 
分析：record是一个数组，所以取值要用get，而record.data已经是一个对象了，所以可以直接用“.”
详情请参照：http://blog.csdn.net/liu78778/article/details/3942990
 

后台返回数据如下：

xmmcStore:

1 data: [{id:4, name:百年老字手工豆腐火锅}, {id:5, name:光伏节能减排照明系统}]

itemStore:

1 data: [{department:商贸局 农业局 , company:一号企业}]
 注意事项：

1.返回的数据中的data即定义的JsonReader中的root

2.返回的数据的data后面必须是json数据的数组！就算只有一条数据也得用数组形式返回。

3.文本框不可编辑方式有2种： readOnly:true或 disable:true 
4.要显示非文本框样式，则加上一句：style:'background:none;border:0px;', 
{    
    name:"xmdw",
    xtype:"textfield",
    fieldLabel:"项目单位",
    readOnly:true,
    style:'background:none;border:0px;',
    width:200
},{
    name:"depart",
    xtype:"textfield",
    fieldLabel:"主管部门",
    readOnly:true,
    style:'background:none;border:0px;',
    width:200
}
View Code

 

  
效果如下： 
 
  
 
  
 
  
 
  
 

posted on 2017-01-13 13:22  决心觉新  阅读(217)  评论(0)    收藏  举报