设计思路：
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] 作用主要用来刷侧边栏（后退，回到根目录）。
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叫数据，这里构建一个modelExt.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图表游览界面所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）