Sencha Touch / ExtJs 热门支持技巧

Sencha支持团队分享了他们在每月的Sencha新闻通讯中针对Sencha框架的热门技巧。在本文，将会介绍一些新的技巧和从今年早些时候总结出的很多重要技巧。如果喜欢这些与Sencha框架有关技巧和大量的技术文章，请订阅每月的Sencha通讯。

Greg Barry：使用Ruby 2的名为Maverick的Sencha Cmd来了

正如你所知的，Sencha Cmd一直依赖于Ruby 1.9.3或以下版本，而使用Ruby 2.0则会出现错误。比较古怪的地方是，使用Sass变量的Ext JS主题总被设置为“null!default”。Cmd的Sass版本使用的是旧版本，而新版本在一些变量的行为上做了些修改。Ruby 2.0的重要修改和Cmd使用的Sass版本不兼容。所有这些因素造成了兼容性问题，这也是为什么一直要求旧版本Ruby的原因。

不过，在Mavericks的发布版本默认安装的将是Ruby 2.0。我们做了一些本质的调整，让Cmd现在可以与Ruby 2.0一起工作了。新版的Cmd将附带一个Sass版本补丁来防止之前遇到的问题。修补程序现在已经可以在Cmd 4.0.1 beta版中使用了。

注意：对于目前需要维护的应用程序，最好不要升级到Mavericks，直到发布GA版本的时候再尝试。

Seth Lemmons：Ext.util.Observable.capture() (Ext JS)

如果希望监听使用Ext.util.Observable的类的所有事件的触发情况，可以使用静态方法capture来实现，例如，通过以下代码就可以监听网格中所有的事件：

	var grid = Ext.widget('gridpanel', {
	    renderTo: document.body,
	    title: 'Capture Example',
	    heigh: 300,
	    width: 500,
	    store: {
	        fields: ['foo'],
	        data: [{
	            foo: 'bar'
	        }]
	    },
	    columns: [{
	        text: 'Foo',
	        dataIndex: 'foo',
	        flex: 1
	    }]
	});
 
	Ext.util.Observable.capture(grid, function (eventName, args) {
	    // console.log() will not work on all browsers - modify accordingly
	    console.log(eventName); // log the event's name as it's fired
	});

方法capture会调用作为第二个参数传递给它的函数。传递给回调函数的参数依次包括：
1、触发的事件名称
2、触发事件时传递给事件的参数数组

方法capture不单可以让你深入了Observable实例如何并在何时触发事件，还能在回调方法中返回false来阻止事件触发。如果一个类有before前缀的事件，这是用来阻止事件触发的最佳做法，如果没有，就可以使用capture这个便利的工具方法来实现。如果想了解更多有关Observable的capture方法，可以访问这里。

Greg Barry：不再需要autoMaxminze（Sencha Touch）

在之前，可以设置调用Viewport功能类的autoMaxminze来实现Web视图的全屏幕化。这样可有效的隐藏Web应用程序中的顶部或底部工具栏。然而，随着设备的变化，该配置的功能和作用越来越少，以致不得不去阻止这种变化。事实上，该配置在Touch 2.3.0中已经得到解决，尤其是在使用iOS7的时候。这次，建议的是将autoMaximize从他们的应用程序移除。

Greg Barry：一个存储（Store）多次使用（Ext JS）

当使用Ext JS创建应用程序的时候，习惯做法，会给存储定义storeid，以便在多个组件中共享他们。然后，如果网格A和网格B共享一个存储，当对存储进行过滤的时候，两个网格都会显示过滤后的数据。有什么办法可以在存储改变时，不让所以的组件都发生变化呢？不要担心！

在定义存储的时候，可以使用“store.storealias”这种方式来定义存储的别名（storealias就是要定义的别名名称）。

例如：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    storeId: 'MyStore',
    alias: 'store.mystore',
    fields: ['foo', 'bar']
});

现在，当为组件绑定存储时，可以为他们绑定不同的存储实例，这样就让组件保持独立：

store: {
    type: 'mystore'
}

要了解更多相关信息，可阅读这篇文章。

Mitchell Simoens：分割折线图（Ext JS）

Sencha Ext JS提供了丰富和功能完整的图表包，它可插件是免费的且可在IE6到最新版本的Chorme等浏览器上实现跨浏览器工作。一个常见的问题是如何在折线图上显示不连续的线。Ext JS要实现这个很简单，只需要在数据中使用false就可以了。如果返回false，这个点就会被视为非数据点而不进行绘制，而该点之前与之后的点也不会进行连接，以下是一个示例：

var store = Ext.create('Ext.data.Store', {
    fields : ['month', 'foo', 'bar'],
    data   : [
        { month : 'January',   foo : 7,     bar : false },
        { month : 'February',  foo : 8,     bar : 3     },
        { month : 'March',     foo : 8,     bar : 2     },
        { month : 'April',     foo : 7,     bar : 1     },
        { month : 'May',       foo : false, bar : 1     },
        { month : 'June',      foo : 5,     bar : 1     },
        { month : 'July',      foo : 5,     bar : 1     },
        { month : 'August',    foo : false, bar : 1     },
        { month : 'September', foo : 7,     bar : 1     },
        { month : 'October',   foo : 8,     bar : 2     },
        { month : 'November',  foo : 8,     bar : 3     },
        { month : 'December',  foo : 7,     bar : false }
    ]
});
 
Ext.create('Ext.chart.Chart', {
    renderTo : Ext.getBody(),
    width    : 500,
    height   : 300,
    animate  : true,
    store    : store,
    axes     : [
        {
            type     : 'Numeric',
            position : 'left',
            fields   : ['foo', 'bar'],
            title    : 'Sample Values',
            minimum  : 0
        },
        {
            type     : 'Category',
            position : 'bottom',
            fields   : ['month'],
            title    : 'Month'
        }
    ],
    series   : [
        {
            type   : 'line',
            axis   : 'left',
            xField : 'month',
            yField : 'foo'
        },
        {
            type   : 'line',
            axis   : 'left',
            xField : 'month',
            yField : 'bar'
        }
    ]
});

在示例中，将根据foo和bar的值显示两条线。由于在5月和8月返回了false值，所以foo线将会分成3段显示。而bar线则与fool先不同，只显示一条线。线bar由于1月和12月返回false值，所以不会显示1月和12月的数据点。

要了解更多关于字段触发的信息，可以阅读这里：https://fiddle.sencha.com/#fiddle/mu

Greg Barry：通过Sencha Touch按钮的灵敏度来创建响应式应用程序（Sencha Touch）

由于设备的分辨率越来越大和越来越好，一些用户可能会碰到Sencha Touch按钮灵敏度的问题。不用担心，在Sencha Touch 2.2.0中，引入了一个名为moveDistance的新事件识别配置项。moveDistance会从touchstart事件开始，检测像素的最大距离来决定是否触碰操作。对于大的设备，默认值是8像素，可能有点太低，因此一些触碰可以不予理会。要调整这种灵敏度，只需要在应用程序中添加以下代码：

Ext.application({
	name : 'MyApp',
	eventPublishers : {
    	touchGesture : {
        	recognizers : {
            	tap : {
                    xclass   	: 'Ext.event.recognizer.Tap',
                    moveDistance : 20 //This was adjusted from the default 8
            	}
        	}
    	}
	}
});

要了解更多有关moveDistance的信息可阅读这里。

Seth Lemmons：使用串联-更快的文件传输 (Sencha Cmd)

很多时候，开发人员会使用Sencha Cmd来创建并生成Ext JS或Sencha Touch应用程序，这样，就只需要在首页中链接Cmd生成的JavaScript文件all-classes.s文件。但是，是否考虑将所选择的文件串联起来进行压缩以实现更快的文件传输吗？

对于使用选择文件创建简单的文件（不是应用程序中使用requires配置项所依赖的类），可以使用fs和concat命令。

例如，要串联JavaScript文件A和B，可以使用以下命令：

sencha fs concat -to=concatenated.js -from=file-a.js,/file-b.js

或者，如果希望压缩输出，可以这样：

sencha fs concat -to=concatenated.js -from=file-a.js,file-b.js and minify -yui -from=concatenated.js -to=minified.js

* -yui 或 -closure 是可用的压缩选项
通过以下这骗文章可以了更多有关该功能的信息：http://docs.sencha.com/extjs/4.2.1/#!/guide/command_advanced

Greg Barry：压缩实战（Sencha Cmd和Ext JS）

有时候可能需要创建未经压缩的的产品生成。很幸运，这是非常简单的事情。

打开production.properties配置，位于这里：

.sencha/app/production.properties

找到后，就可以编辑压缩设置。

如果要禁用YUI压缩，可以修改为：

build.compression.yui=1

要禁用CSS压缩，可以这样修改：

build.css.compress=true

要了解更多有关Sencha Cmd的自定义选项，可以访问这里：http://docs.sencha.com/cmd/3.1.2/#!/guide/command_advanced

作者: Sencha Support Team
原文: http://www.sencha.com/blog/top-sencha-support-tips/
译者: 黄灯桥
译文: http://blog.csdn.net/tianxiaode/article/details/15501749