改写一下EXT的官方例子multisort-dataview.html。使用后台从数据库获取来的的数据无法实现排序效果以及出错。

Question

我用ff调试的时候发现官方例子里的 DataViewTransition.js 的一段代码没有执行过。
    var el = parentEl.child("#" + this.dataviewID + "-" + calcItem.get(this.idProperty));
            
            //calculate the number of rows and columns we have
            var itemCount   = store.getCount(),
                itemWidth   = el.getMargins('lr') + el.getWidth(),
                itemHeight  = el.getMargins('bt') + el.getHeight(),
                dvWidth     = parentEl.getWidth(),
                columns     = Math.floor(dvWidth / itemWidth),
                rows        = Math.ceil(itemCount / columns),
                currentRows = Math.ceil(this.getExistingCount() / columns);而我把官网的本地数据改成自己从后台获取来的数据时刚好有走过这段代码。 提示 itemWidth   = el.getMargins('lr') + el.getWidth() [Microsoft JScript 运行时错误: 'null' 为空或不是对象] 后来查出来时 el 为空。不论我怎么调试 都不能让el不为空。跪求高手一助！！！
下面是我  multisort-dataview.js 里面的代码 我只改  multisort-dataview.js 的代码其他都没动过。
      Ext.onReady(function() {   var store = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({url: '../lead/try.ashx'}),
          reader: new Ext.data.JsonReader
                  ({
                    root: 'data',
                    idProperty: 'hasCamera',
                    fields:['camera', 'hasCamera', 'id', 'price', 'name']
                  }), 
       sortInfo: {
            field    : 'name',
            direction: 'ASC'
        },
        remoteSort: false,
        baseParams: {s_method: 'list'}
        
    });
    store.load();
    var dataview = new Ext.DataView({
        store: store,
        tpl  : new Ext.XTemplate(
            '<ul>',
                '<tpl for=".">',
                    '<li class="phone">',
                        '<img width="64" height="64" src="imgdatabase/{[values.hasCamera]}.jpg"/>',
                        '<strong>{name}</strong>',
                        '<span>{price:usMoney} ({camera} MP)</span>',
                    '</li>',
                '</tpl>',
            '</ul>'
        ),
        plugins : [
            new Ext.ux.DataViewTransition({
                duration  : 550,
                idProperty: 'name'
            })
        ],
        
        id: 'phones',
        
        itemSelector: 'li.phone',
        overClass   : 'phone-hover',
        singleSelect: true,
        multiSelect : true,
        autoScroll  : true
    });
    
    var tbar = new Ext.Toolbar({
        items  : ['Sort on these fields:', ''],
        plugins: [new Ext.ux.ToolbarReorderer()],
        
        listeners: {
            scope    : this,
            reordered: function(button) {
                changeSortDirection(button, false);
            }
        }
    });
    
    new Ext.Panel({
        title: 'Animated DataView',
        layout: 'fit',
        items : dataview,
        height: 615,
        width : 800,
        tbar  : tbar,
        renderTo: 'docbody'
    });
    
    tbar.add(createSorterButton({
        text: 'Megapixels',
        sortData: {
            field: 'hasCamera',
            direction: 'DESC'
        }
    }));
    
    tbar.add(createSorterButton({
        text: 'Price',
        sortData: {
            field: 'price',
            direction: 'DESC'
        }
    }));
    
    //perform an initial sort
    doSort();
    
    //The following functions are used to get the sorting data from the toolbar and apply it to the store
    
    /**
     * Tells the store to sort itself according to our sort data
     */
    function doSort() {
        store.sort(getSorters(), "ASC");
    };
    
    /**
     * Callback handler used when a sorter button is clicked or reordered
     * @param {Ext.Button} button The button that was clicked
     * @param {Boolean} changeDirection True to change direction (default). Set to false for reorder
     * operations as we wish to preserve ordering there
     */
    function changeSortDirection(button, changeDirection) {
        var sortData = button.sortData,
            iconCls  = button.iconCls;
        
        if (sortData != undefined) {
            if (changeDirection !== false) {
                button.sortData.direction = button.sortData.direction.toggle("ASC", "DESC");
                button.setIconClass(iconCls.toggle("sort-asc", "sort-desc"));
            }
            
            store.clearFilter();
            doSort();
        }
    };
    
    /**
     * Returns an array of sortData from the sorter buttons
     * @return {Array} Ordered sort data from each of the sorter buttons
     */
    function getSorters() {
        var sorters = [];
        
        Ext.each(tbar.findByType('button'), function(button) {
            sorters.push(button.sortData);
        }, this);
        
        return sorters;
    }
    
    /**
     * Convenience function for creating Toolbar Buttons that are tied to sorters
     * @param {Object} config Optional config object
     * @return {Ext.Button} The new Button object
     */
    function createSorterButton(config) {
        config = config || {};
              
        Ext.applyIf(config, {
            listeners: {
                click: function(button, e) {
                    changeSortDirection(button, true);                    
                }
            },
            iconCls: 'sort-' + config.sortData.direction.toLowerCase(),
            reorderable: true
        });
        
        return new Ext.Button(config);
    };
});

Answer 1

既然知道是el为null,那么你就一步一步的跟踪啊,打印啊什么的.弄清楚它这里el具体是指到哪个组件。然后再根据这个组件来自己写些函数不就行了?

Answer 2

new Ext.XTemplate 你这个构造有问题没？

Answer 3

 var el = parentEl.child("#" + this.dataviewID + "-" + calcItem.get(this.idProperty));
首先是你的 parentEl这个看有没有传进来。如果传进来了那么看看他的节点有没有你的那个dataviewID节点。  报null错误一般都是你的el里没有获取到值主要看你的赋值这边。。
都过了这么久了。这个问题可能作废了吧 ！
    

Answer 4

这个问题我也遇到了，我经过检查发现是因为store数据没有请求完，这个插件就已经去调用，造成了这个问题。
主要是在
 store.on('datachanged', function(store) {...},this) 这个方法里面调用的，如果在这个方法前 延时一下 就可以解决 正确显示了。alert("") 阻塞下  暂时 还没有找到好的方法。解决的思路应该是 在store 数据加载完了后  再添加这个监听。

Answer 5

   var store = new Ext.data.GroupingStore( {
      reader : reader,
      sortInfo: {field: 'boardCode', direction: "ASC"},
      groupField: 'materCode',
      data: data
   });