Sench类似List多列控件实现

因为公司开发项目需要，要有多列的list设计，在实现上用sencha 自带的list不能完成，所以自己写下了这个。

以下内容是自己写的，本人刚刚开学学习sencha，也是第一次写博客，想把自己的学习过程记录下。欢迎吐槽。

实现原理很简单，就是在往MyList中添加数据的时候先添加一行（ListRow）,这个listRow其实就是一个简单的container控件。（因为项目原因，本次的开发不能使用sencha的数据代理。所以所有数据都是自己手动通过ajax获取）

然后把要添加的数据添加到listrow控件下。在添加下一个数据的时候先判断这行中已经存在了几个数据了，如果数据已经满了，那么在新建一行添加到mylist中。

loadmore其实就是一个按钮，先判断mylist中显示了数据的count，如果count小于服务端要显示数据的总数据，那么就显示,相当于list控件中的上拉加载更多的插件。

（上面说的数据其实就是对应显示数据的一个sencha内部的组件，如：button等。）

代码如下：

Ext.define('MyList', {

    extend: 'Ext.Container',

    xtype: 'muticolumnlist',

    requires: [

        'ListRow',

        'LoadMore',

        'ListColumn'

    ],

    config: {

//分页是把以下两个参数传递到服务端获取数据

        pageIndex: 1, //分页页码

        pageSize: 5, //分页每页数据

        searchKey: '',

        datacount: 0,

        listColumn: 2, //list的列数

        scrollable: 'vertical',

        width: '100%',

        height: '100%',

        items:[]

    },

    initialize: function() {

        this.callParent();

    },

    //清除所有数据

    clearAll: function(){

        this.removeAll(true, true);

    },

    //添加一行

    addRow: function(){

        var newRow = Ext.create('ListRow');

        this.add(newRow);

    },

    //添加一个视图对象

    addItem: function(view){

        if(!view){

            return;

        }

        if (this.items.getCount() == 0) {

            this.addRow();

        }

        var lastRow = this.items.last();

        

        if(lastRow.items.getCount() < this.getListColumn()){

            lastRow.add(view);

        }else{

            this.addRow();

            this.items.last().add(view);

        }

    },

    //添加加载更多视图

    addLoadMoreView: function(totalcount){

        if(this.getDatacount() < totalcount){

            this.addItem(Ext.create('LoadMore'));

        }

    },

    //添加数组数据，datas是数据的列表

    addItems: function(datas){

        if(datas instanceof Array){

            this.deleteLastItem();

            for(var i=0; i<datas.length; i++){
                var model = datas[i];

                //创建显示数据的组件

                var dataView = Ext.create('ListColumn');

                this.addItem(dataView);

                dataView.showData(model);

            }

        }

    },

    //清除最后一个Item

    deleteLastItem: function(){

        var lastRow = this.items.last();

        if(lastRow && lastRow.items){

            lastRow.remove(lastRow.items.last());

        }

    },

    // 从服务器加载数据

    loadDataToListByPage: function(pageIndex) {

    //此处重服务端获取数据填充到store（分页获取）

    }

});