Extjs中创建Store数据源的方式

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

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

文章标签：

#extjs

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了 ExtJS 中数据绑定的实现方式，包括使用 SimpleStore 和 JsonStore 处理本地数据源的方法，以及如何通过 Store 结合 Proxy 和 Reader 从后台获取数据。此外，还提供了具体的实例分析和注意事项。

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

一.本地数据源

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

01var arrStore =
new Ext.data.SimpleStore({

02    data:[

03        /*{id:1,name:"zs",age:22},

04        {id:2,name:"ls",age:23},

05        {id:3,name:"ww",age:24}*/注释掉的是json格式的，只能用JsonStore

06        [1,"zs",22],

07        [2,"ls",23],

08        [3,"ww",24]

09    ],

10    fields:["id","name","age"]

11});

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

1var jsonStore =
new Ext.data.JsonStore({

2    data:[

3        {id:1,name:"zs",age:22},

4        {id:2,name:"ls",age:23},

5        {id:3,name:"ww",age:24}

6    ],

7    fields:["id","name","age"]

8});

fields类型：

实例分析：

01//1.设置数据源

02var jsonStore =
new Ext.data.JsonStore({

03    data:[

04        {id:1,name:"zs",age:22},

05        {id:2,name:"ls",age:23},

06        {id:3,name:"ww",age:24}

07    ],

08    fields:["id","name","age"]

09});

10 

11//2.定义列

12var cm = 
new Ext.grid.ColumnModel({

13    columns:[

14        {

15            header:"编号",

16            dataIndex:"id",

17            width:100,

18            sortable:true

19        },{

20            header:"姓名",

21            dataIndex:"name",

22            width:100,

23            sortable:true

24        },{

25            header:"年龄",

26            dataIndex:"age",

27            width:100,

28            sortable:true

29        }

30    ]

31});

32 

33 

34 

35//4.创建表格面板

36var grid = 
new Ext.grid.GridPanel({

37    cm:cm,

38    store:jsonStore,

39    height:80,

40    tbar:[

41        {

42            text:"增加项目",

43            iconCls:"add",

44            handler:function(){

45                addWin.show();

46            }

47        },{

48            text:"修改",

49            iconCls:"edit"

50        },{

51            text:"删除",

52            iconCls:"remove"

53        }

54    ]

55});

56 

57 

58Ext.onReady(function(){

59    Ext.state.Manager.setProvider(new
Ext.state.CookieProvider());

60    Ext.QuickTips.init();

61    new
Ext.Viewport({

62        layout:
'fit',

63        items: [grid]

64    });

65});

注意事项：

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

效果：

二.后台获取数据源

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

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

正确写法：

1var epStore =
new Ext.data.JsonStore({

2    autoLoad:
true,

3    url:"getEProject.eva?doType=getEProject",

4    root:"data",

5    fields: ["project","company"]

6});

错误写法：（此时，若将JsonStore换成其父类Store则可以正确解析！）

01var epProxy =
new Ext.data.HttpProxy({

02    url:"getEProject.eva?doType=getEProject"

03});

04 

05var epReader =
new Ext.data.JsonReader({

06    root:"data",

07    fields: ["project","company"]

08});

09 

10var epStore =
new Ext.data.JsonStore({//此处若换成父类Store则解析正确

11    autoLoad:
true,

12    proxy:epProxy,

13    reader:epReader

14});

2.Store：Ext.data.Store

方式一：结合式定义

01var xmmcStore =
new Ext.data.Store({

02    proxy:  
new Ext.data.HttpProxy({

03                url:'getXmmc.eva?doType=getXmmc'

04            }),

05    /*注：此处用url代替proxy也是可以的,如下：

06    url:'getXmmc.eva?doType=getXmmc',

07    但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式！！！*/

08    reader: 
new Ext.data.JsonReader({

09                root:
'data'

10            },[

11                { name:
'id' }, 

12                { name:
'name'}

13            ])

14});

15 

16//此处也可将reader中的fields换简便方式定义，如下：

17var xmmcStore =
new Ext.data.Store({

18    proxy:  
new Ext.data.HttpProxy({

19                url:'getXmmc.eva?doType=getXmmc'

20            }),

21    reader: 
new Ext.data.JsonReader(

22            {root:
'data'},

23            ['id','name']

24    )

25});

26 

27//proxy换成url形式：

28var xmmcStore =
new Ext.data.Store({

29    url:'getXmmc.eva?doType=getXmmc',

30    reader: 
new Ext.data.JsonReader(

31            {root:
'data'},

32            ['id','name']

33    )

34});

方式二：分离式定义

01var itemProxy =
new Ext.data.HttpProxy({

02    url:"getItem.eva?doType=getItem"

03});

04var itemReader =
new Ext.data.JsonReader(

05    {

06        root:"data"

07    },[

08        {"name":"company"},

09        {"name":"department"}

10]);

11var itemStore =
new Ext.data.Store({

12    proxy:itemProxy,

13    reader:itemReader

14});

15 

16此处也可将reader中的fields换简便方式定义，如下：

17var itemReader =
new Ext.data.JsonReader(

18    {root:"data"},

19    ["company","department"]

20);

方式三：带Record形式：

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

02 

03/*1.创建Record*/

04var costRecord =
new Ext.data.Record.create([

05    {name:"id",type:"int"},

06    {name:"xmid",type:"int"},

07    {name:"subject",type:"string"},

08    {name:"planCost",type:"string"},

09    {name:"actualCost",type:"string"}

10]);

11/*2.创建Proxy*/

12var costProxy=new
Ext.data.HttpProxy({

13    url:'getProjectCost.eva?doType=getProjectCost',

14    timeout:90000

15}); 

16/*3.创建Reader*/

17var costReader =
new Ext.data.JsonReader({

18    root:"data"

19},costRecord);

20/*4.创建Store*/

21var costStore =
new Ext.data.Store({

22    proxy:costProxy,

23    reader: costReader

24});

25 

26 

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

28 

29/*1.创建Record*/

30var costRecord =
new Ext.data.Record.create([

31    {name:"id",type:"int"},

32    {name:"xmid",type:"int"},

33    {name:"subject",type:"string"},

34    {name:"planCost",type:"string"},

35    {name:"actualCost",type:"string"}

36]);

37/*2.创建Store*/

38var costStore =
new Ext.data.Store({

39    proxy:new
Ext.data.HttpProxy({

40            url:'getProjectCost.eva?doType=getProjectCost',

41            timeout:90000

42        }),

43    reader: 
new Ext.data.JsonReader({

44        root:"data"

45    },costRecord)

46});

47 

48 

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

50 

51/*1.创建Record*/

52var costRecord =
new Ext.data.Record.create([

53    {name:"id",type:"int"},

54    {name:"xmid",type:"int"},

55    {name:"subject",type:"string"},

56    {name:"planCost",type:"string"},

57    {name:"actualCost",type:"string"}

58]);

59/*2.创建Store*/

60var costStore =
new Ext.data.Store({

61    url:"getProjectCost.eva?doType=getProjectCost",

62    reader: 
new Ext.data.JsonReader({

63        root:"data"

64    },costRecord)

65});

66 

67 

68/**方式四：直接创建 JsonStore!*/————注意：这种方式只能用JsonStore,不能用父类Store

69var costStore =
new Ext.data.JsonStore({

70    url:"getProjectCost.eva?doType=getProjectCost",

71    root:"data",

72    fields:["id","xmid","subject","planCost","actualCost"]

73});

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

实例分析：

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

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

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

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

01var xmmcCombox =
new Ext.form.ComboBox({

02    fieldLabel:"项目名称",

03    store:xmmcStore,

04    displayField:"name",

05    valueField:"id",

06    triggerAction:"all",

07    emptyText:"请选择",

08    editable:false,

09    listeners:{

10        /*"expand":function(){

11            xmmcStore.load();

12        },*/

13        "select":function(obj, record){

14            itemStore.baseParams.xmid = record.get('id');

15            itemStore.load();

16        }

17    }

18});

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

(2).创建form表单：

01var addForm =
new Ext.FormPanel({

02    frame: 
true,

03    labelWidth: 80,

04    //labelAlign: "right",

05    //buttonAlign:"center",

06    items:[

07        xmmcCombox,

08        {   

09            name:"xmdw",

10            xtype:"textfield",

11            fieldLabel:"项目单位",

12            readOnly:true,

13            width:200

14        },{

15            name:"depart",

16            xtype:"textfield",

17            fieldLabel:"主管部门",

18            readOnly:true,

19            width:200

20        }

21    ]

22});

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

1itemStore.on('load',
function (store, record, options) {

2    var
comp = record[0].get("company");

3    var
dept = record[0].data.department;

4    addForm.getForm().findField("xmdw").setValue(comp);

5    addForm.getForm().findField("depart").setValue(dept);

6});

注意事项：

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:

1data: [{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;',

01{   

02    name:"xmdw",

03    xtype:"textfield",

04    fieldLabel:"项目单位",

05    readOnly:true,

06    style:'background:none;border:0px;',

07    width:200

08},{

09    name:"depart",

10    xtype:"textfield",

11    fieldLabel:"主管部门",

12    readOnly:true,

13    style:'background:none;border:0px;',

14    width:200

15}