Skip to content

Instantly share code, notes, and snippets.

@manish-metacube

manish-metacube/jsbin.xurij.html

Created August 6, 2014 13:52
Show Gist options
  • Save manish-metacube/81393f59ce668da31bfe to your computer and use it in GitHub Desktop.
Save manish-metacube/81393f59ce668da31bfe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.xurij.html
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.sencha.io/touch/sencha-touch-2.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.sencha.io/touch/sencha-touch-2.1.0/sencha-touch-all.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
Raw
jsbin.xurij.js
//define the application
Ext.application({
//require any components/classes what we will use in our example
requires: [
'Ext.data.Store',
'Ext.List',
'Ext.plugin.PullRefresh'
],
launch: function() {
//get the configuration for the list
var listConfiguration = this.getListConfiguration();
//if the device is not a phone, we want to create a centered panel and put the list
//into that
if (!Ext.os.is.Phone) {
//use Ext.Viewport.add to add a new component into the viewport
Ext.Viewport.add({
//give it an xtype of panel
xtype: 'panel',
//give it a fixed witdh and height
width: 320,
height: 480,
//make it centered
centered: true,
//make the component modal so there is a mask around the panel
modal: true,
//set hideOnMaskTap to false so the panel does not hide when you tap on the mask
hideOnMaskTap: false,
//give it a layout of fit so the list stretches to the size of this panel
layout: 'fit',
//insert the listConfiguration as an item into this panel
items: [listConfiguration]
});
} else {
//if we are a phone, simply add the list as an item to the viewport
Ext.Viewport.add(listConfiguration);
}
},
/**
* Returns a configuration object to be used when adding the list to the viewport.
*/
getListConfiguration: function() {
//create a store instance
var store = Ext.create('Ext.data.Store', {
//give the store some fields
fields: ['firstName', 'lastName'],
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
data: [
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Ape", "lastName": "Evilias" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Ape", "lastName": "Evilias" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Ape", "lastName": "Evilias" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Ape", "lastName": "Evilias" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Zed", "lastName": "Zacharias "}
]
});
return {
//give it an xtype of list for the list component
xtype: 'list',
//set the itemtpl to show the fields for the store
itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
//enable disclosure icons
disclosure: true,
//group the list
grouped: true,
//enable the indexBar
indexBar: true,
//set the function when a user taps on a disclsoure icon
onItemDisclosure: function(record, item, index, e) {
//show a messagebox alert which shows the persons firstName
e.stopEvent();
Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
},
//bind the store to this list
store: store
};
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment