上篇大致讲了对源码的理解,这篇展示一个初步的九宫格控件。直接上源码:

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方面深入下去:

  1. 功能上:加入添加监控、选中当前项、绑定list等
  2. 实现上:基于view自己处理render和event,这样会对原理了解的更深入,也可以学着自己实现一套简单的前端库。

webix custom component-九宫格的更多相关文章

  1. Quartus14.1中Qsys无法更新custom component的问题

    如果对Qsys中custom component进行了改动,如果直接generate HDL无法使改动应用到实际的编译过程,需要对Qsys进行刷新操作,如下:

  2. Quartus14.1中Qsys创建custom component时编译出错原因

    利用Quartus14.1中Qsys工具新建自定义组件时会产生“part-select direction is opposite from prefix index direction”错误,这是由 ...

  3. webix源码阅读

    最近在用webix,需要一个类似九宫格的监控界面.自带的控件里没有,于是萌生出做一个Custom Component的需求.不过webix关于自定义控件的文档比较少,官方只有一篇<Creatin ...

  4. vue从入门到进阶:组件Component详解(六)

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  5. angularjs component

    Component https://docs.angularjs.org/guide/component component本质上就是directive. This is a shorthand fo ...

  6. [翻译]Writing Custom Report Components 编写自定义报表组件

    摘要:简单介绍了如何编写一个FastReport的组件,并且注册到FastReport中使用.   Writing Custom Report Components 编写自定义报表组件 FastRep ...

  7. Using a custom AxisRenderer object

    Using a custom AxisRenderer object http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d1 ...

  8. Vue教程:组件Component详解(六)

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  9. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

随机推荐

  1. SQL中插入单引号,新增修改删除

    1.插入单引号如果不转化的话,字符串插入到数据库中错误的,只要在字符串中有单引号的地方在加一个单引号即可.    例如:在数据库插入'井下设备' :    insert into Static_Bel ...

  2. 白话LINQ系列2---以代码演进方式学习LINQ必备条件

    今天,我们通过一个简单的示例代码的演进过程,来学习LINQ必备条件:隐式类型局部变量:对象集合初始化器:委托:匿名函数:lambda表达式:扩展方法:匿名类型.废话不多说,我们直接进入主题. 一.实现 ...

  3. vlc播放yuv文件

    vlc.exe --demux rawvideo --rawvid-fps 25 --rawvid-width 480 --rawvid-height 272 --rawvid-chroma I420 ...

  4. Python—Socket

    Socket模块 socket通常也称作"套接字",用于描述IP地址和端口,是特定网络协议如TCP/IP.UDP/IP套件对网络应用程序提供者提供的当前可移植标准的对象, 用来连接 ...

  5. win7 64 旗舰版虚拟GPU-VMware下+vs2013安装caffe+matlab+python

    转发请说明来处 Win7配置caffe(无GPU) 配置环境: 必须:win7 64 + vs2013 Win7 64位旗舰版要升级到service spack(因为是在vs2013下,想安装vs20 ...

  6. 上传预览图片自己做的.md

    1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览  单个 $(".demo input#demo_file" ...

  7. UA模拟

    安卓QQ内置浏览器UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like ...

  8. Auty自动化测试框架第三篇——添加异常处理与日志收集

    [本文出自天外归云的博客园] 本次对框架进行完善,增加了日志收集功能和修饰运行功能,完善后的lib目录如下:

  9. python 注意事项

    常见错误 #4:  不理解Python的作用域 Python是基于 LEGB 来进行作用于解析的, LEGB 是 Local, Enclosing, Global, Built-in 的缩写.看起来“ ...

  10. centos中安装mysql数据库

    1.查看是否已有mysql数据库: #rpm -qa |grep mysql 命令返回空,说明没有安装成功. 2.安装mysql yum install mysql* 安装完成后,却发现只安装了JDB ...