Extjs中创建Store数据源的方式

最新推荐文章于 2017-10-18 12:41:34 发布

转载最新推荐文章于 2017-10-18 12:41:34 发布 · 845 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文介绍了ExtJS中创建Store数据源的方法，包括使用不同类型的Store（如SimpleStore和JsonStore），并详细解释了如何配置Store来加载本地数据或从后台获取数据。此外，还通过实例展示了如何结合下拉框和文本框实现数据联动。

Extjs中创建Store数据源的方式

分享到：

评论(0) |2014-10-21 |发布 pfan

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

一.本地数据源

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"]
 
});

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]
 
    });
 
});

注意事项：

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"]
 
});

错误写法：（此时，若将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']
 
    )
 
});

方式二：分离式定义

 
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"]
 
);

方式三：带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"]
 
});

注：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();
 
        }
 
    }
 
});

注：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
 
        }
 
    ]
 
});

(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);
 
});

注意事项：

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.youkuaiyun.com/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
 
}