Code:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<linkhref="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css"rel="stylesheet"type="text/css"/>
<title>Creating an inline Ext.List component in Sencha Touch 2</title>
<!-- http://senchaexamples.com/2012/03/15/creating-an-inline-list-using-an-ext-list-control-in-sencha-touch-2/ -->
</head>
<body>
<scriptsrc="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all.js"type="text/javascript"></script>
<scripttype="text/javascript">
Ext.application({
launch:function(){
Ext.create('Ext.List',{
fullscreen:true,
inline:true,
items:[{
xtype:'toolbar',
docked:'top',
items:[{
text:'inline = true',
handler:function(){
this.up('list').setInline(true);
}// handler
},{
text:'inline = false',
handler:function(){
this.up('list').setInline(false);
}// handler
},{
text:'inline = {wrap: false}',
handler:function(){
this.up('list').setInline({wrap:false});
}// handler
}]// items (toolbar)
}],// items (list)
store:{
fields:['name','league','division'],
sorters:'name',
data:[{
name:'New York Yankees',
league:'AL',
division:'East'
},{
name:'Tampa Bay',
league:'AL',
division:'East'
},{
name:'Boston',
league:'AL',
division:'East'
},{
name:'Toronto',
league:'AL',
division:'East'
},{
name:'Baltimore',
league:'AL',
division:'East'
},{
name:'Detroit',
league:'AL',
division:'Central'
},{
name:'Cleveland',
league:'AL',
division:'Central'
},{
name:'Chicago White Sox',
league:'AL',
division:'Central'
},{
name:'Kansas City',
league:'AL',
division:'Central'
},{
name:'Minnesota',
league:'AL',
division:'Central'
},{
name:'Texas',
league:'AL',
division:'West'
},{
name:'Los Angeles Angels',
league:'AL',
division:'West'
},{
name:'Oakland',
league:'AL',
division:'West'
},{
name:'Seattle',
league:'AL',
division:'West'
}]// data
},// store
itemTpl:'{name}'
});// create()
}// launch
});// application()
</script>
</body>
</html>
inline list and sencha touch 2.1
Reply With Quote
