sencha-touch-1.1制作ipad图表游览界面

概述设计思路： 1.首先到http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-3/ 下载mvc sample 并理解其设计文章 2.直接在框架中进行开发，首先需要改的就是viewport，定义框架，主要包括头

设计思路：

1.首先到http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-3/

下载mvc sample 并理解其设计文章

2.直接在框架中进行开发，首先需要改的就是vIEwport，定义框架，主要包括头部的工具条栏与侧边

.

App.vIEws.VIEwport = Ext.extend(Ext.Panel,{    fullscreen: true,layout: 'card',cardSwitchAnimation: 'fade',dockedItems: [				{					dock   : 'top',xtype  : 'toolbar',cls    : 'x-toolbar-dark',baseCls: 'x-toolbar',height : 45,itemID : 'newqueryForm',items: [								{ iconMask: true,ui: 'back',text: 'Back',itemID: 'backBtn',},{ iconMask: true,ui: 'home',text:'Home',itemID: 'homeBtn',{xtype: 'spacer'},ui: 'query',text:'Tab',itemID: 'tabquery',}							]				},{                    dock : 'left',xtype: 'searchbar',wIDth: 400                }            ],});

由于头工具栏与侧边栏位置将定死，现在我们可以在余下的空间内对页面进行配置。

3.我们要做的就是对工具栏的几个button进行配置(app.Js)

Ext.regApplication({    name: 'App',defaultUrl: 'Home/index',launch: function()    {        	//Array delete item and delete memory		this.vIEwport = new App.vIEws.VIEwport();             this.vIEwport.query('#backBtn')[0].setHandler(function(){			var searchesstore = Ext.getStore('Searches');			//var searchList    = Ext.getCmp('searchesList');			var i = parentArray.length;			if (i == 0) {				return;			}			else {				if (parentArray[i - 1] == 1) {					searchesstore.getProxy().url = allMetricUrl;					parentArray.removeMemory(i - 1);					searchesstore.read();				}				else {					searchesstore.getProxy().url = childMetricUrl + parentArray[i - 1];					parentArray.removeMemory(i - 1);					searchesstore.read();				}			}        });				this.vIEwport.query('#homeBtn')[0].setHandler(function(){            //Ext.ControllerManager.get('Search').index();			var searchesstore = Ext.getStore('Searches');			searchesstore.getProxy().url = allMetricUrl;			parentArray=new Array();			searchesstore.read();			searchesstore.load();			});

由于是应用最先执行的Js，我们可以在这里定义全局变量，当然最主要的，我们可以通过

 this.vIEwport.query('#backBtn')[0]

获得vIEwport中的按钮，通过setHandler的方法，我们将可对按钮赋予函数。从上面代码我们可以看到，home button和back button我们对其赋予了刷新数据源的 *** 作，

作用主要用来刷侧边栏（后退，回到根目录）。

4.开始对controller进行设计，首先要定义的就是通过app.Js中看到的默认路径，在controller中定义一个index的action

defaultUrl: 'Home/index',

于是乎我们看到：

Ext.regController('Home',{     // index action	index: function(options)    {        var store=Ext.getStore('Charts');		if(!store.first())		{			Ext.dispatch({                controller: "Home",action    : "about",//instance  : first,historyUrl: "Home/about"            });				}		else{			if ( ! this.indexVIEw)			{				this.indexVIEw = this.render({					xtype: 'HomeIndex',});			}						this.application.vIEwport.setActiveItem(this.indexVIEw,options.animation);		}    },// about action    about: function()    {        if ( ! this.aboutVIEw)        {            this.aboutVIEw = this.render({                xtype: 'HomeAbout',});        }        this.application.vIEwport.setActiveItem(this.aboutVIEw);    },});

从代码中我们看到lz试图通过判断数据源中的数据是否存在，来决定逻辑的方向：数据源中如果存在数据，index action将执行渲染页面，并展示的 *** 作，

如果数据源中没有获得任何数据，程序将跳转至about页面，系统将把about页面展示出来。

5.设计展示的页面，这里我们假定设计一个line图表嵌套在chart.pannel中，在嵌套在tab.pannel中

代码：

	var lineChart = new Ext.chart.Chart({    Title: 'line',iconCls: 'line',cls: 'chartpanel',interactions: ['reset',{        type: 'panzoom',axes: {            right: {}        }    },{        type: 'iteminfo',gesture: 'tap',Listeners: {			'show': function(me,item,panel) {				var storeItem = item.storeItem;				panel.update('<ul><li><b>DateTime:</b> ' + storeItem.get('DateTime') + '</li><li><b>Value: </b> ' + storeItem.get('m1') + '</li></ul>');			}		}    }],animate: false,store: 'Charts',axes: [{        type: 'Numeric',position: 'right',minimum: 0,adjustMinimumByMajorUnit: 0,fIElds: ['m1'],Title: 'Points',grID: {            odd: {                stroke: '#777'            },even: {                stroke: '#555'            }        }    },{        type: 'category',position: 'bottom',fIElds: ['DateTime'],Title: 'DateTime',label: {            rotate: {                degrees: 45            }        }    }],// legend: {        // position: Ext.is.Phone ? 'left' : 'top'    // },theme: 'Energy',serIEs: [{        type: 'line',highlight: false,showMarkers: false,fill: true,smooth: true,axis: 'right',xFIEld: 'DateTime',yFIEld: 'm1',Title: ['m1']    }});              var lineChartPanel = new Ext.chart.Panel({            Title: 'lineMetricname',ID:'indexline',layout: 'fit',iconCls: 'bar',dockedItems: {				iconMask: true,ui: 'setting',text:'Setting',itemID: 'settingBtn',handler: showSetting            },items:[lineChart]			});
App.vIEws.HomeIndex = Ext.extend(Ext.TabPanel,{	fullscreen:false,ID:'homeIndex',dockedItems: [				toolbar1,toolbar2            ],tabbar: {		dock: 'bottom',hIDden:true,layout: {			pack: 'center'		}	},cardSwitchAnimation: {		type: 'slIDe'	},type: 'dark',sortable: false,items: [lineChartPanel]	//barChart,pIEChart,scatterChart,areaChart]		});Ext.reg('HomeIndex',App.vIEws.HomeIndex);

6.对数据源的定义，lz用的是从wcf叫数据，这里构建一个model
Ext.regModel("Search",{    //after replace fIEld,the right pannel will not show(auto loading will no working) 	// fIElds: [        // {name: "ID",type: "int"},// {name: "query",type: "string"}    // ],fIElds: [{        name: 'MetricID',type: 'int'    },{        name: 'Hostname',type: 'string'    },{        name: 'Metricname',{        name: 'ParameterID',{        name: 'StatusID',{        name: 'UserDomain',{        name: 'parentNodeID',{        name: 'NodeID',{        name: 'HasChildren',type: 'int'    }],proxy: {        ID  : 'twitter-searches',url: 'http://emite-pc:5555/exampleJsonpService/Nodes',type: 'scripttag',extraParams: {            username: 'admin',userDomain: 'admin'        },reader: {            root: ''        }	}			});


如此可以在sencha-toucha1.1中request Jsonp的数据源，除此以外我们还需要一个数据仓库，供我们存储request成功的数据
Ext.regStore('Searches',{    model: 'Search',autoLoad: true});
如此便可将store绑定到图表形成我们上面的界面

总结

以上是内存溢出为你收集整理的sencha-touch-1.1制作ipad图表游览界面全部内容，希望文章能够帮你解决sencha-touch-1.1制作ipad图表游览界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。