Category Archives: Sencha Touch

Hello Mobile world with Sencha touch~!

How to use select box for Sencha Touch (Combo box)

I tried to use combo box as same to Ext-js.

but it does not work, and I found there is the other way we should use.


{
	xtype : 'selectfield',
	name : 'color',
	label : "What's your favority color ",
	options : [
		{
			text : 'Red',
			value : 'red',
		},
		{
			text : 'Blue',
			value : 'blue',
		}
	]
},
Posted in Sencha Touch, Tech Note | Tagged , , , | Leave a comment

Nested List Sample (with event handler)

var data = {
			items : [
				{
				text : 'About',
				items : [
						{
							text : 'Open Account',
							leaf :true
						},
						{
							text : 'Employment & Carrers',
							leaf : true
						},
						{
							text : 'Our Location',
							leaf : true
						},
						{
							text : 'Business Hours',
							leaf : true
						},
						{
							text : 'Contact Info',
							leaf : true,
							id : 'contactInfo'
						},
					] //about grant
				},
				{
					text : 'Our News',
					leaf : true
				},
				{
					text : 'Products',
					leaf : true
				},
				{
					text : 'Resources',
					leaf : true
				},
				{
					text : 'Jobs',
					leaf : true
				}
			]
		};
		
		Ext.regModel('ListItem',{
			fields : [
						{name:'text', type:'string'},
						{name:'id', type:'string'}
					 ]
		});

		var store = new Ext.data.TreeStore({
			model : 'ListItem',
			root : data,
			proxy : {
				type : 'ajax',
				reader : {
					type : 'tree',
					root : 'items'
				}
			},
			autoLoad : true
		});

		var nestedList = new Ext.NestedList({
			fullscreen : true,
			title : 'Main Menu',
			displayField : 'text',
			dock : 'top',
			store: store
		});

                //Hook event handler for leaf only
		nestedList.on('leafitemtap',function(subList,subIdx,el,e,detailCard){
			var store = subList.getStore();
			var	target = store.getAt(subIdx);
			var targetId = target.get('id');	
			
			switch(targetId){
				case "contactInfo" : 
					console.log('You clicked contact Info menu!');
					break;
				default : 
					console.log('You clicked Unknown Item!');
					break;
			}

			nestWrap.hide();
		});

		var nestWrap = new Ext.Panel({
			id : 'nestWrap',
			floating : true,
			width : 300,
			height: 300,
			layout : 'fit',
			hidden : true,
			items : [nestedList]
		});
Posted in Sencha Touch, Tech Note | Tagged , , , , | 5 Comments