Sencha Touch 2.3 中的坑

email ： gm4linus at gmail dot com

近些日子由于工作原因接触了Sencha Touch，版本是2.1和2.3，相比于之前用过的1.1版本有了相当大的改变。公司的产品是用2.1版本开发的，现在要升级为2.3的Sencha Touch。本篇文章主要记载Sencha Touch2.3.0中一些有意思的陷阱，具体记录多少个要看我能遇到多少了。至于如何对待这些陷阱，我建议绕着他们走。

第一个坑：

描述：某组件暂记为A，若A组件配置了modal为true，其他容器组件在调用自身的insert方法向自己内部插入A组件的实例时下表位置错乱。比如Container.insert(0, new A()); 按照API说明insert会在将A组件的实例放在第0个位置，但是实际上却放在了倒数第二个位置。

原因：Sencha Touch的所有容器组件都有一个items属性和innerItems属性，均是数组类型，后者是顺序直接决定了页面上DOM元素的位置。而innerItems依赖于items中元素的顺序，当modal为true时会在items中生成一个modal相关的元素，放在第0个位置。相关代码可以在Container.js中的insertInner方法中找到，关键代码如下

if (typeof index == 'number') {
            do {
                nextSibling = items[++index];
            } while (nextSibling && !nextSibling.isInnerItem());

            if (nextSibling) {
                newInnerIndex = innerItems.indexOf(nextSibling);
                innerItems.splice(newInnerIndex, 0, item);
            }
        }

index为要插入的位置，item为要插入的子组件。假设是insert(0, item)，对于已经包含了三个组件的容器组件，当执行到这段代码时items中的元素依次为modal相关的元素、item、其余的三个组件。nextSibling = items[++index];会导致item的nextSibling为自己本身，所以newInnerIndex会得到-1，进而innerItems.splice(newInnerIndex, 0, item);执行的是innerItems.splice(-1, 0, item); ，item被插入到了倒数第二个位置。

如果觉得没看懂具体怎么回事儿，打个断点多看两遍就明白了。

解决方案：按理来说这个问题是不应该发生的，因为既然A是组件，那么modal就是多余的，去掉就是了。