初探sencha touch

最新推荐文章于 2024-09-24 11:09:41 发布

we1207one

最新推荐文章于 2024-09-24 11:09:41 发布

阅读量301

点赞数

分类专栏： sencha touch 文章标签： function layout phonegap html border flex

本文链接：https://blog.csdn.net/we1207one/article/details/7677883

版权

sencha touch 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于公司不久后有个项目所以原本做PC端web前端的我开始转战移动

发现phonegap的优点就尝试利用sencha touch 来根据项目要求试着写写看

1 架设phonegap 开发环境，网上有很多，这里就不多说了

我手机是三星 android的就在eclise开发

2 尝试写1个九宫格的主页

 Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
        	fullscreen: true,
        	layout:{
        	type:'vbox'
        	},
        	items:[{
        		xtype: 'titlebar',
        	    docked: 'top',
        	    title: 'XX影视',
        	    items: [
        	        {
        	            iconCls: 'settings',
        	            iconMask: true,
        	            align: 'right',
        	            handler:function(){
        	            	location.href="third.html";
        	            }
        	        }
        	    ]
        	},{   
        		            xtype: 'panel',
        		            margin: '40 0 0 0',
        		            defaults: {
        		                xtype: 'panel',
        		                layout: 'hbox',
        		                align: 'center',
        		                margin: '25 0 0 0'
        		            },
        		            items: [{
        		                defaults: {
        		                    xtype: 'panel',
        		                    margin: 10,
        		                    layout: 'vbox',
                                    align: 'center',
                                    flex:1,
        		                    style: 'border: 1px solid #cccccc; border-radius: 5px;'
        		                },
        		                items: [{
        	 	                   xtype:'button',
        	 	                   text:'景点',
        	 	                   handler:function(){
        	 	                	  
        	 	                   }
        	                    
        		                }, {
        		                   xtype:'button',
                                   text:'地图',
                                   handler:function(){
                                     
                                    }
        		                }, {
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }]
        		            }, {
        		                defaults: {
        		                    xtype: 'panel',
        		                    margin: 10,
        		                    layout: 'vbox',
                                    align: 'center',
                                    flex:1,
        		                    style: 'border: 1px solid #cccccc; border-radius: 5px;'
        		                },
        		                items: [{
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }, {
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }, {
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }]
        		            }, {
        		                defaults: {
        		                    xtype: 'panel',
        		                    margin: 10,
        	                       	layout: 'vbox',
                                    align: 'center',
                                    flex:1,
        		                    style: 'border: 1px solid #cccccc; border-radius: 5px;'
        		                },
        		                items: [{
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }, {
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }, {
        		                    html: '<img src="images/shop2.png" width="60" height="60" />'
        		                }]
        		           }]
            	      	
        	}] 	
        });
    }
});

由于菜鸟，这里遇到了些麻烦，就是图片如何获得function来切换其他本地页面，还得看看API

3 google MAP 在android webview的实现

Ext.setup({
            tabletStartupScreen : 'tablet_startup.png',
            phoneStartupScreen  : 'phone_startup.png',
            icon                : 'phone_startup.png',
            onReady             : function() {
            	var position=new google.maps.LatLng(29.15845759917225, 120.36277770996094); //根据设置相应的初始位置
            	
            	
            	
            	Ext.create('Ext.Panel',{
            	   fullscreen:true,
            	   layout:'fit',
            	   items:[{
            		   xtype:'titlebar',
            		   docked:'top',
            		   title:'XX周边地图',
            		   items:[{
            			   iconCls: 'reply',
            	            iconMask: true,
            	            align: 'left',
            	            handler:function(){
            	            	location.href="index.html";
            	            }
            	        },
            	        {
            	            iconCls: 'home',
            	            iconMask: true,
            	            align: 'right',
            	            handler:function(){
            	       //预留
            	          
            	            }
            		   }]
            	   },{
            		    xtype:'map',
            			layout : 'fit',
            			mapOptions : {
                            center : new google.maps.LatLng(29.15845759917225, 120.36277770996094),  //nearby San Fran
                            zoom : 12,
                            mapTypeId : google.maps.MapTypeId.ROADMAP,
                            navigationControl: true,
                            navigationControlOptions: {
                                style: google.maps.NavigationControlStyle.DEFAULT
                            }
                        },
                        listeners: {
                            maprender: function(comp, map) {
                                var marker = new google.maps.Marker({
                                    position: position,
                                    title : 'XX ',
                                    map: map
                                });

                                google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.open(map, marker);
                                });

                                setTimeout(function() {
                                    map.panTo(position);
                                }, 1000);
                            }

                        },
                    	config : {
                    	    items  : [{
                    	        xtype   : 'map',
                    	        name:'mymap',
                    	        id:'mymap',
                    	        useCurrentLocation : false
                    	    }]
                    	}
            	   }]
               });
            }
        });

这个比较简单，官网上的获得当前地址出错，正在解决

还有一些页面就不放了，本人菜鸟，由于以前用了extjs很久了 sencha touch 上手蛮快的

有没有前辈一起交流下经验吧