上篇大致讲了对源码的理解，这篇展示一个初步的九宫格控件。直接上源码：
webix.protoUI({
name:"grid",
$init:function(config){
config.rowCount = config.rowCount || 3;
config.colCount = config.colCount || 3;
if(!config.rows){
config.rows = [];
}
config.rows.push({
view:"toolbar",
cols:[
{id:config.id+"btn_2",view:"button",value:"2*2",align:"left",width:60,click:this._adjust},
{id:config.id+"btn_3",view:"button",value:"3*3",align:"left",width:60,click:this._adjust},
{id:config.id+"btn_4",view:"button",value:"4*4",align:"left",width:60,click:this._adjust},
{id:config.id+"_i",view:"text",width:60,align:"right"},
{view:"label",label:"*",width:20,align:"center"},
{id:config.id+"_j",view:"text",width:60,align:"right"},
{id:config.id+"btn_adjust",view:"button",value:"OK",align:"left",width:60,click:this._adjust},
{},
]
});
Array.prototype.push.apply(config.rows, this._initRowCol(config));
this._settings = config;
},
_initRowCol:function(config){
var rows = [];
for(var i=0;i<config.rowCount;i++){
rows.push({cols:[]});
for(var j=0;j<config.colCount;j++){
var tmp = webix.clone(config.itemTemplate);
tmp.id = config.id+"_row"+i+"_col"+j;
rows[i].cols.push(tmp);
}
}
return rows;
},
_reconstruct:function(){
this._collection = this._collection.slice(0, 1);
var rowsConfig = this._initRowCol(this._settings);
Array.prototype.push.apply(this._collection, rowsConfig);
webix.ui.baselayout.prototype.reconstruct.call(this);
},
_adjust:function(id,e){
var parent = this._parent_cell._parent_cell;
var count = id.substr(id.lastIndexOf("_")+1);
if(webix.ui.grid.prototype._isNumber.call(parent, count)){
parent._settings.rowCount = parent._settings.colCount = count;
} else {
var id = parent._settings.id;
var i = $$(id+"_i").getValue();
var j = $$(id+"_j").getValue();
if(!webix.ui.grid.prototype._isNumber.call(parent, i) || !webix.ui.grid.prototype._isNumber.call(parent, j)){
webix.message("Please input number");
return;
}
parent._settings.rowCount = i;
parent._settings.colCount = j;
}
webix.ui.grid.prototype._reconstruct.call(parent);
},
_isNumber:function(num){
return !isNaN(parseFloat(num)) && isFinite(num);
},
}, webix.ui.layout);
效果见这里，几个n*n的按钮在本地跑是OK的，在webix提供的这个沙盒里会出错，具体没深究。这个控件只是基于layout，动态调整config，再调用baselayout.reconstruct。可以往2方面深入下去：
- 功能上：加入添加监控、选中当前项、绑定list等
- 实现上：基于view自己处理render和event，这样会对原理了解的更深入，也可以学着自己实现一套简单的前端库。