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，定义框架，主要包括头部的工具条栏与侧边

.

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'},{ iconMask: true, 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 memorythis.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 actionindex: 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',        type: 'string'    }, {        name: 'ParameterId',        type: 'int'    }, {        name: 'StatusId',        type: 'int'    }, {        name: 'UserDomain',        type: 'string'    }, {        name: 'ParentNodeId',        type: 'int'    }, {        name: 'NodeId',        type: 'int'    }, {        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绑定到图表形成我们上面的界面