Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Step 3 - Basic grid bound to a data store

  • Loading branch information...
commit 7f250d18536ae27f9b074be88b9f09ffcd3ed653 1 parent a2f9715
Aaron Conran authored August 11, 2012
24  CarListings.xds
@@ -28,15 +28,35 @@
28 28
                 "metadata/resource/Library"
29 29
             ],
30 30
             "className": "Library"
  31
+        },
  32
+        "0315c038-557a-4e0a-8263-df261c02f018": {
  33
+            "paths": [
  34
+                "metadata/store/CarDataStore",
  35
+                "app/store/override/CarDataStore.js",
  36
+                "app/store/CarDataStore.js"
  37
+            ],
  38
+            "className": "CarDataStore"
  39
+        },
  40
+        "44284846-393f-4336-9e37-fe0ed78e1e2a": {
  41
+            "paths": [
  42
+                "metadata/model/CarData",
  43
+                "app/model/override/CarData.js",
  44
+                "app/model/CarData.js"
  45
+            ],
  46
+            "className": "CarData"
31 47
         }
32 48
     },
33 49
     "viewOrderMap": {
34 50
         "view": [
35 51
             "fa6a13d2-be29-4bce-9bf8-7087e3a9c6ba"
36 52
         ],
37  
-        "store": [],
  53
+        "store": [
  54
+            "0315c038-557a-4e0a-8263-df261c02f018"
  55
+        ],
38 56
         "controller": [],
39  
-        "model": [],
  57
+        "model": [
  58
+            "44284846-393f-4336-9e37-fe0ed78e1e2a"
  59
+        ],
40 60
         "resource": [
41 61
             "67363d08-999e-4648-b11d-5d9fe657da91"
42 62
         ],
6  app.js
@@ -18,6 +18,12 @@ Ext.Loader.setConfig({
18 18
 });
19 19
 
20 20
 Ext.application({
  21
+    models: [
  22
+        'CarData'
  23
+    ],
  24
+    stores: [
  25
+        'CarDataStore'
  26
+    ],
21 27
     views: [
22 28
         'CarListings'
23 29
     ],
36  app/model/CarData.js
... ...
@@ -0,0 +1,36 @@
  1
+/*
  2
+ * File: app/model/CarData.js
  3
+ *
  4
+ * This file was generated by Sencha Architect version 2.0.0.
  5
+ * http://www.sencha.com/products/architect/
  6
+ *
  7
+ * This file requires use of the Ext JS 4.1.x library, under independent license.
  8
+ * License of Sencha Architect does not include license for Ext JS 4.1.x. For more
  9
+ * details see http://www.sencha.com/license or contact license@sencha.com.
  10
+ *
  11
+ * This file will be auto-generated each and everytime you save your project.
  12
+ *
  13
+ * Do NOT hand edit this file.
  14
+ */
  15
+
  16
+Ext.define('MyApp.model.CarData', {
  17
+    extend: 'Ext.data.Model',
  18
+
  19
+    fields: [
  20
+        {
  21
+            name: 'manufacturer'
  22
+        },
  23
+        {
  24
+            name: 'model'
  25
+        },
  26
+        {
  27
+            name: 'price'
  28
+        },
  29
+        {
  30
+            name: 'wiki'
  31
+        },
  32
+        {
  33
+            name: 'quality'
  34
+        }
  35
+    ]
  36
+});
40  app/store/CarDataStore.js
... ...
@@ -0,0 +1,40 @@
  1
+/*
  2
+ * File: app/store/CarDataStore.js
  3
+ *
  4
+ * This file was generated by Sencha Architect version 2.0.0.
  5
+ * http://www.sencha.com/products/architect/
  6
+ *
  7
+ * This file requires use of the Ext JS 4.1.x library, under independent license.
  8
+ * License of Sencha Architect does not include license for Ext JS 4.1.x. For more
  9
+ * details see http://www.sencha.com/license or contact license@sencha.com.
  10
+ *
  11
+ * This file will be auto-generated each and everytime you save your project.
  12
+ *
  13
+ * Do NOT hand edit this file.
  14
+ */
  15
+
  16
+Ext.define('MyApp.store.CarDataStore', {
  17
+    extend: 'Ext.data.Store',
  18
+
  19
+    requires: [
  20
+        'MyApp.model.CarData'
  21
+    ],
  22
+
  23
+    constructor: function(cfg) {
  24
+        var me = this;
  25
+        cfg = cfg || {};
  26
+        me.callParent([Ext.apply({
  27
+            autoLoad: true,
  28
+            storeId: 'MyJsonStore',
  29
+            model: 'MyApp.model.CarData',
  30
+            proxy: {
  31
+                type: 'ajax',
  32
+                url: 'data/cars.json',
  33
+                reader: {
  34
+                    type: 'json',
  35
+                    root: 'data'
  36
+                }
  37
+            }
  38
+        }, cfg)]);
  39
+    }
  40
+});
36  app/view/CarListings.js
@@ -33,31 +33,37 @@ Ext.define('MyApp.view.CarListings', {
33 33
                 {
34 34
                     xtype: 'gridpanel',
35 35
                     flex: 1,
  36
+                    store: 'CarDataStore',
  37
+                    viewConfig: {
  38
+
  39
+                    },
36 40
                     columns: [
37 41
                         {
38 42
                             xtype: 'gridcolumn',
39  
-                            dataIndex: 'string',
40  
-                            text: 'String'
  43
+                            dataIndex: 'manufacturer',
  44
+                            text: 'Manufacturer'
  45
+                        },
  46
+                        {
  47
+                            xtype: 'gridcolumn',
  48
+                            dataIndex: 'model',
  49
+                            text: 'Model'
41 50
                         },
42 51
                         {
43  
-                            xtype: 'numbercolumn',
44  
-                            dataIndex: 'number',
45  
-                            text: 'Number'
  52
+                            xtype: 'gridcolumn',
  53
+                            dataIndex: 'price',
  54
+                            text: 'Price'
46 55
                         },
47 56
                         {
48  
-                            xtype: 'datecolumn',
49  
-                            dataIndex: 'date',
50  
-                            text: 'Date'
  57
+                            xtype: 'gridcolumn',
  58
+                            dataIndex: 'wiki',
  59
+                            text: 'Wiki'
51 60
                         },
52 61
                         {
53  
-                            xtype: 'booleancolumn',
54  
-                            dataIndex: 'bool',
55  
-                            text: 'Boolean'
  62
+                            xtype: 'gridcolumn',
  63
+                            dataIndex: 'quality',
  64
+                            text: 'Quality'
56 65
                         }
57  
-                    ],
58  
-                    viewConfig: {
59  
-
60  
-                    }
  66
+                    ]
61 67
                 }
62 68
             ]
63 69
         });
BIN  data/2004_Porsche_911_Carrera_type_997.jpg
BIN  data/250px-2007_Audi_TT_Coupe.jpg
BIN  data/250px-Audi_S5.jpg
BIN  data/250px-BMW_M3_E92.jpg
BIN  data/250px-Nissan_GT-R.jpg
130  data/cars.json
... ...
@@ -0,0 +1,130 @@
  1
+{
  2
+    "data" : [{ 
  3
+        "img" : "2004_Porsche_911_Carrera_type_997.jpg",
  4
+        "manufacturer" : "Porsche",
  5
+        "model" : "911",
  6
+        "price" : 135000,
  7
+        "quality" : [{ 
  8
+            "name" : "overall",
  9
+            "rating" : 1
  10
+        },{ 
  11
+            "name" : "mechanical",
  12
+            "rating" : 4
  13
+        },{ 
  14
+            "name" : "powertrain",
  15
+            "rating" : 2
  16
+        },{ 
  17
+            "name" : "body",
  18
+            "rating" : 4
  19
+        },{ 
  20
+            "name" : "interior",
  21
+            "rating" : 3
  22
+        },{ 
  23
+            "name" : "accessories",
  24
+            "rating" : 2
  25
+        }],
  26
+        "wiki" : "http://en.wikipedia.org/wiki/Porsche_997"
  27
+    },{ 
  28
+        "img" : "250px-Nissan_GT-R.jpg",
  29
+        "manufacturer" : "Nissan",
  30
+        "model" : "GT-R",
  31
+        "price" : 80000,
  32
+        "quality" : [{ 
  33
+            "name" : "overall",
  34
+              "rating" : 2
  35
+            },
  36
+            { "name" : "mechanical",
  37
+              "rating" : 3
  38
+            },
  39
+            { "name" : "powertrain",
  40
+              "rating" : 5
  41
+            },
  42
+            { "name" : "body",
  43
+              "rating" : 4
  44
+            },
  45
+            { "name" : "interior",
  46
+              "rating" : 2
  47
+            },
  48
+            { "name" : "accessories",
  49
+              "rating" : 2
  50
+            }
  51
+        ],
  52
+        "wiki" : "http://en.wikipedia.org/wiki/Nissan_Gt-r"
  53
+    },{ 
  54
+        "img" : "250px-BMW_M3_E92.jpg",
  55
+        "manufacturer" : "BMW",
  56
+        "model" : "M3",
  57
+        "price" : 60500,
  58
+        "quality" : [ { "name" : "overall",
  59
+              "rating" : 3
  60
+            },
  61
+            { "name" : "mechanical",
  62
+              "rating" : 5
  63
+            },
  64
+            { "name" : "powertrain",
  65
+              "rating" : 3
  66
+            },
  67
+            { "name" : "body",
  68
+              "rating" : 4
  69
+            },
  70
+            { "name" : "interior",
  71
+              "rating" : 5
  72
+            },
  73
+            { "name" : "accessories",
  74
+              "rating" : 3
  75
+            }
  76
+        ],
  77
+        "wiki" : "http://en.wikipedia.org/wiki/Bmw_m3"
  78
+    },{ 
  79
+        "img" : "250px-Audi_S5.jpg",
  80
+        "manufacturer" : "Audi",
  81
+        "model" : "S5",
  82
+        "price" : 53000,
  83
+        "quality" : [ { "name" : "overall",
  84
+              "rating" : 4
  85
+            },
  86
+            { "name" : "mechanical",
  87
+              "rating" : 1
  88
+            },
  89
+            { "name" : "powertrain",
  90
+              "rating" : 1
  91
+            },
  92
+            { "name" : "body",
  93
+              "rating" : 4
  94
+            },
  95
+            { "name" : "interior",
  96
+              "rating" : 1
  97
+            },
  98
+            { "name" : "accessories",
  99
+              "rating" : 5
  100
+            }
  101
+        ],
  102
+        "wiki" : "http://en.wikipedia.org/wiki/Audi_S5#Audi_S5"
  103
+    },{ 
  104
+        "img" : "250px-2007_Audi_TT_Coupe.jpg",
  105
+        "manufacturer" : "Audi",
  106
+        "model" : "TT",
  107
+        "price" : 40000,
  108
+        "quality" : [{ 
  109
+            "name" : "overall",
  110
+              "rating" : 5
  111
+            },
  112
+            { "name" : "mechanical",
  113
+              "rating" : 2
  114
+            },
  115
+            { "name" : "powertrain",
  116
+              "rating" : 2
  117
+            },
  118
+            { "name" : "body",
  119
+              "rating" : 3
  120
+            },
  121
+            { "name" : "interior",
  122
+              "rating" : 4
  123
+            },
  124
+            { "name" : "accessories",
  125
+              "rating" : 1
  126
+            }
  127
+        ],
  128
+        "wiki" : "http://en.wikipedia.org/wiki/Audi_TT"
  129
+    }]
  130
+}
6  metadata/Application
@@ -6,6 +6,12 @@
6 6
     },
7 7
     "codeClass": null,
8 8
     "userConfig": {
  9
+        "models": [
  10
+            "CarData"
  11
+        ],
  12
+        "stores": [
  13
+            "CarDataStore"
  14
+        ],
9 15
         "views": [
10 16
             "CarListings"
11 17
         ],
80  metadata/model/CarData
... ...
@@ -0,0 +1,80 @@
  1
+{
  2
+    "type": "datamodel",
  3
+    "reference": {
  4
+        "name": "items",
  5
+        "type": "array"
  6
+    },
  7
+    "codeClass": null,
  8
+    "userConfig": {
  9
+        "designer|userClassName": "CarData"
  10
+    },
  11
+    "id": "ExtBox1-ext-gen4108",
  12
+    "designerId": "44284846-393f-4336-9e37-fe0ed78e1e2a",
  13
+    "cn": [
  14
+        {
  15
+            "type": "datafield",
  16
+            "reference": {
  17
+                "name": "fields",
  18
+                "type": "array"
  19
+            },
  20
+            "codeClass": null,
  21
+            "userConfig": {
  22
+                "designer|userClassName": "MyField",
  23
+                "name": "manufacturer"
  24
+            },
  25
+            "designerId": "1f2a373a-5542-45c1-a073-a19e2f24e573"
  26
+        },
  27
+        {
  28
+            "type": "datafield",
  29
+            "reference": {
  30
+                "name": "fields",
  31
+                "type": "array"
  32
+            },
  33
+            "codeClass": null,
  34
+            "userConfig": {
  35
+                "designer|userClassName": "MyField1",
  36
+                "name": "model"
  37
+            },
  38
+            "designerId": "9457f1d9-cb15-48a2-929e-aba43749eb39"
  39
+        },
  40
+        {
  41
+            "type": "datafield",
  42
+            "reference": {
  43
+                "name": "fields",
  44
+                "type": "array"
  45
+            },
  46
+            "codeClass": null,
  47
+            "userConfig": {
  48
+                "designer|userClassName": "MyField2",
  49
+                "name": "price"
  50
+            },
  51
+            "designerId": "0bdbd53c-a3a3-42e5-af2c-6b664d2f1fa8"
  52
+        },
  53
+        {
  54
+            "type": "datafield",
  55
+            "reference": {
  56
+                "name": "fields",
  57
+                "type": "array"
  58
+            },
  59
+            "codeClass": null,
  60
+            "userConfig": {
  61
+                "designer|userClassName": "MyField3",
  62
+                "name": "wiki"
  63
+            },
  64
+            "designerId": "5772beaa-658d-478c-a8f4-a485e9a4f30e"
  65
+        },
  66
+        {
  67
+            "type": "datafield",
  68
+            "reference": {
  69
+                "name": "fields",
  70
+                "type": "array"
  71
+            },
  72
+            "codeClass": null,
  73
+            "userConfig": {
  74
+                "designer|userClassName": "MyField4",
  75
+                "name": "quality"
  76
+            },
  77
+            "designerId": "0846e5f8-7b72-434a-a64c-cb3f88af72d1"
  78
+        }
  79
+    ]
  80
+}
46  metadata/store/CarDataStore
... ...
@@ -0,0 +1,46 @@
  1
+{
  2
+    "type": "jsonstore",
  3
+    "reference": {
  4
+        "name": "items",
  5
+        "type": "array"
  6
+    },
  7
+    "codeClass": null,
  8
+    "userConfig": {
  9
+        "designer|userClassName": "CarDataStore",
  10
+        "autoLoad": true,
  11
+        "storeId": "MyJsonStore",
  12
+        "model": "CarData"
  13
+    },
  14
+    "id": "ExtBox1-ext-gen5045",
  15
+    "designerId": "0315c038-557a-4e0a-8263-df261c02f018",
  16
+    "cn": [
  17
+        {
  18
+            "type": "ajaxproxy",
  19
+            "reference": {
  20
+                "name": "proxy",
  21
+                "type": "object"
  22
+            },
  23
+            "codeClass": null,
  24
+            "userConfig": {
  25
+                "designer|userClassName": "MyAjaxProxy",
  26
+                "url": "data/cars.json"
  27
+            },
  28
+            "designerId": "b14e40ae-0e6c-4385-99f1-6f74052c2325",
  29
+            "cn": [
  30
+                {
  31
+                    "type": "jsonreader",
  32
+                    "reference": {
  33
+                        "name": "reader",
  34
+                        "type": "object"
  35
+                    },
  36
+                    "codeClass": null,
  37
+                    "userConfig": {
  38
+                        "designer|userClassName": "MyJsonReader",
  39
+                        "root": "data"
  40
+                    },
  41
+                    "designerId": "84c9270c-599b-4349-aab1-978aa0607fb3"
  42
+                }
  43
+            ]
  44
+        }
  45
+    ]
  46
+}
65  metadata/view/CarListings
@@ -28,11 +28,24 @@
28 28
             "userConfig": {
29 29
                 "layout|flex": 1,
30 30
                 "designer|userClassName": "MyGridPanel",
31  
-                "title": null
  31
+                "title": null,
  32
+                "store": "CarDataStore"
32 33
             },
33 34
             "designerId": "a5a407e7-18fa-4914-918f-2c5b6789392d",
34 35
             "cn": [
35 36
                 {
  37
+                    "type": "gridview",
  38
+                    "reference": {
  39
+                        "name": "viewConfig",
  40
+                        "type": "object"
  41
+                    },
  42
+                    "codeClass": null,
  43
+                    "userConfig": {
  44
+                        "designer|userClassName": "MyGridView"
  45
+                    },
  46
+                    "designerId": "78c707bc-3756-4dfe-bfc3-e79324bf3b1b"
  47
+                },
  48
+                {
36 49
                     "type": "gridcolumn",
37 50
                     "reference": {
38 51
                         "name": "columns",
@@ -40,65 +53,67 @@
40 53
                     },
41 54
                     "codeClass": null,
42 55
                     "userConfig": {
43  
-                        "designer|userClassName": "MyColumn",
44  
-                        "dataIndex": "string",
45  
-                        "text": "String"
  56
+                        "designer|userClassName": "MyColumn1",
  57
+                        "dataIndex": "manufacturer",
  58
+                        "text": "Manufacturer"
46 59
                     },
47  
-                    "designerId": "119acfec-3bac-4ff2-a475-c9accd38bbcf"
  60
+                    "designerId": "aa12be43-ba64-4553-9672-d4ce69212624"
48 61
                 },
49 62
                 {
50  
-                    "type": "numbercolumn",
  63
+                    "type": "gridcolumn",
51 64
                     "reference": {
52 65
                         "name": "columns",
53 66
                         "type": "array"
54 67
                     },
55 68
                     "codeClass": null,
56 69
                     "userConfig": {
57  
-                        "designer|userClassName": "MyNumberColumn",
58  
-                        "dataIndex": "number",
59  
-                        "text": "Number"
  70
+                        "designer|userClassName": "MyColumn2",
  71
+                        "dataIndex": "model",
  72
+                        "text": "Model"
60 73
                     },
61  
-                    "designerId": "ed8d026f-62e3-43a5-952b-bf47fdbf1b51"
  74
+                    "designerId": "048a726e-a37d-425b-b474-5cf54b65c09f"
62 75
                 },
63 76
                 {
64  
-                    "type": "datecolumn",
  77
+                    "type": "gridcolumn",
65 78
                     "reference": {
66 79
                         "name": "columns",
67 80
                         "type": "array"
68 81
                     },
69 82
                     "codeClass": null,
70 83
                     "userConfig": {
71  
-                        "designer|userClassName": "MyDateColumn",
72  
-                        "dataIndex": "date",
73  
-                        "text": "Date"
  84
+                        "designer|userClassName": "MyColumn3",
  85
+                        "dataIndex": "price",
  86
+                        "text": "Price"
74 87
                     },
75  
-                    "designerId": "e4c92ad7-5d45-4202-9eab-c80a49321f83"
  88
+                    "designerId": "d4365dc6-c235-426c-8225-3e5754579906"
76 89
                 },
77 90
                 {
78  
-                    "type": "booleancolumn",
  91
+                    "type": "gridcolumn",
79 92
                     "reference": {
80 93
                         "name": "columns",
81 94
                         "type": "array"
82 95
                     },
83 96
                     "codeClass": null,
84 97
                     "userConfig": {
85  
-                        "designer|userClassName": "MyBooleanColumn",
86  
-                        "dataIndex": "bool",
87  
-                        "text": "Boolean"
  98
+                        "designer|userClassName": "MyColumn4",
  99
+                        "dataIndex": "wiki",
  100
+                        "text": "Wiki"
88 101
                     },
89  
-                    "designerId": "597cc4ee-1148-44ee-9259-212c7468d3ac"
  102
+                    "designerId": "07eaf801-329a-4c01-a1ea-1ad051569935"
90 103
                 },
91 104
                 {
92  
-                    "type": "gridview",
  105
+                    "type": "gridcolumn",
93 106
                     "reference": {
94  
-                        "name": "viewConfig",
95  
-                        "type": "object"
  107
+                        "name": "columns",
  108
+                        "type": "array"
96 109
                     },
97 110
                     "codeClass": null,
98 111
                     "userConfig": {
99  
-                        "designer|userClassName": "MyGridView"
  112
+                        "designer|userClassName": "MyColumn5",
  113
+                        "dataIndex": "quality",
  114
+                        "text": "Quality"
100 115
                     },
101  
-                    "designerId": "78c707bc-3756-4dfe-bfc3-e79324bf3b1b"
  116
+                    "designerId": "3c22bf8d-b26a-49ee-8339-948b2b70a48e"
102 117
                 }
103 118
             ]
104 119
         }

0 notes on commit 7f250d1

Please sign in to comment.
Something went wrong with that request. Please try again.