/
index.html
164 lines (134 loc) · 5.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sencha Touch 2 - Barebones Component DataView Example</title>
<!-- Sencha Touch -->
<link rel="stylesheet" href="http://dev.sencha.com/deploy/sencha-touch-2-b1/resources/css/sencha-touch.css">
<script src="http://dev.sencha.com/deploy/sencha-touch-2-b1/builds/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
//define our list item. this is the component displayed in our list
Ext.define('MyListItem', {
xtype: 'mylistitem',
extend: 'Ext.dataview.component.DataItem',
//we are going to use buttons in this item so we need to require that component
requires: ['Ext.Button'],
config: {
//give it a baseCls of list item, so it gets the default list styling
baseCls: Ext.baseCSSPrefix + 'list-item',
//create a button configuration which will be added to this component
//action is used so we can tell what button was tapped
button: {
width: 200,
action: 'button',
},
//create a disclosure configuration for the disclosure icon. we make it docked right
//and give it the default list disclosure icon cls so it gets styled
//action is used so we can tell what button was tapped
disclosure: {
action: 'disclosure',
docked: 'right',
baseCls: Ext.baseCSSPrefix + 'list-disclosure'
},
//add some padding so it looks better
padding: 10,
//data map links the data for this item to the this component.
//so you can see we call getButton, which will return the button, then we call setText
//on that button with the 'name' field from the record.
dataMap: {
getButton: {
setText: 'name'
}
},
//add a listener to every button in this item and when tapped, it will call onButtonTap
listeners: {
delegate: 'button',
tap: 'onButtonTap'
}
},
//this method is used if you want to add additional functionality which dataMap cannot support
updateRecord: function(newRecord, oldRecord) {
//ensure you always callParent here...
this.callParent(arguments);
//just output the record name to the console
console.log('Record updated!', newRecord.get('name'));
},
//this is the apply method for the button config. it basically takes the configs value and transforms
//it into the component that it should be. so in this case we want it to be a button
applyButton: function(config) {
return Ext.factory(config, Ext.Button, this.getButton());
},
//the update method of the config gices you two values: the new value and the old value
//if there is an oldvalue we remove it from this item
//if there is a new value we add it to this item
updateButton: function(newButton, oldButton) {
if (oldButton) {
this.remove(oldButton);
}
if (newButton) {
this.add(newButton);
}
},
//we do the same as above only this time for the disclsoure configuration
applyDisclosure: function(config) {
return Ext.factory(config, Ext.Button, this.getDisclosure());
},
updateDisclosure: function(newDisclosure, oldDisclosure) {
if (oldDisclosure) {
this.remove(oldDisclosure);
}
if (newDisclosure) {
this.add(newDisclosure);
}
},
//this is the function called when a user taps any btuton in our view
onButtonTap: function(button) {
//we check what action is specified on the tapped button so we can delegate to this button or to the disclosure button
if (button.config.action == "disclosure") {
return this.onDisclosureTap(button);
}
console.log('onButtonTap');
},
onDisclosureTap: function() {
console.log('onDisclosureTap');
//we can get the record inside this item by calling the getRecord() method
console.log(this.getRecord());
}
});
//here we define our list which extends dataview and will show our component items (above)
Ext.define('MyList', {
xtype: 'mylist',
extend: 'Ext.DataView',
config: {
//give it the list baseCls so it gets that styling
baseCls: Ext.baseCSSPrefix + 'list',
//give it the useComponents configuration so it will use components instead of
//a simple template
useComponents: true,
//we set the defaultType to the xtype of our list item above
defaultType: 'mylistitem'
}
});
Ext.setup({
onReady: function() {
//create the store and give it some fake data for our list
var store = Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{ name: 'one' },
{ name: 'two' },
{ name: 'three' },
{ name: 'four' }
]
});
//add the list to the viewport and give it the store
Ext.Viewport.add({
xtype: 'mylist',
store: store
});
}
});
</script>
</head>
<body></body>
</html>