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

  1. webix.protoUI({
  2. name:"grid",
  3. $init:function(config){
  4. config.rowCount = config.rowCount || 3;
  5. config.colCount = config.colCount || 3;
  6. if(!config.rows){
  7. config.rows = [];
  8. }
  9. config.rows.push({
  10. view:"toolbar",
  11. cols:[
  12. {id:config.id+"btn_2",view:"button",value:"2*2",align:"left",width:60,click:this._adjust},
  13. {id:config.id+"btn_3",view:"button",value:"3*3",align:"left",width:60,click:this._adjust},
  14. {id:config.id+"btn_4",view:"button",value:"4*4",align:"left",width:60,click:this._adjust},
  15. {id:config.id+"_i",view:"text",width:60,align:"right"},
  16. {view:"label",label:"*",width:20,align:"center"},
  17. {id:config.id+"_j",view:"text",width:60,align:"right"},
  18. {id:config.id+"btn_adjust",view:"button",value:"OK",align:"left",width:60,click:this._adjust},
  19. {},
  20. ]
  21. });
  22. Array.prototype.push.apply(config.rows, this._initRowCol(config));
  23. this._settings = config;
  24. },
  25. _initRowCol:function(config){
  26. var rows = [];
  27. for(var i=0;i<config.rowCount;i++){
  28. rows.push({cols:[]});
  29. for(var j=0;j<config.colCount;j++){
  30. var tmp = webix.clone(config.itemTemplate);
  31. tmp.id = config.id+"_row"+i+"_col"+j;
  32. rows[i].cols.push(tmp);
  33. }
  34. }
  35. return rows;
  36. },
  37. _reconstruct:function(){
  38. this._collection = this._collection.slice(0, 1);
  39. var rowsConfig = this._initRowCol(this._settings);
  40. Array.prototype.push.apply(this._collection, rowsConfig);
  41. webix.ui.baselayout.prototype.reconstruct.call(this);
  42. },
  43. _adjust:function(id,e){
  44. var parent = this._parent_cell._parent_cell;
  45. var count = id.substr(id.lastIndexOf("_")+1);
  46. if(webix.ui.grid.prototype._isNumber.call(parent, count)){
  47. parent._settings.rowCount = parent._settings.colCount = count;
  48. } else {
  49. var id = parent._settings.id;
  50. var i = $$(id+"_i").getValue();
  51. var j = $$(id+"_j").getValue();
  52. if(!webix.ui.grid.prototype._isNumber.call(parent, i) || !webix.ui.grid.prototype._isNumber.call(parent, j)){
  53. webix.message("Please input number");
  54. return;
  55. }
  56. parent._settings.rowCount = i;
  57. parent._settings.colCount = j;
  58. }
  59. webix.ui.grid.prototype._reconstruct.call(parent);
  60. },
  61. _isNumber:function(num){
  62. return !isNaN(parseFloat(num)) && isFinite(num);
  63. },
  64. }, 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. 10. 星际争霸之php设计模式--原型模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  2. 重新安装了mysql,以前的数据库如何导入到新的数据库

    重新安装了mysql,以前的数据库如何导入到新的数据库,导入到新的数据库不能用真么办? 将之前的mysql中的data目录中的数据库文件夹,(需要哪个数据库复制哪个,不要都复制) D:/wamp/bi ...

  3. CentOS 7 防火墙和端口配置

    centos 7 防火墙和端口配置--解决 RHEL 7/ CentOS 7/Fedora 出现Unit iptables.service failed to load # 第一步,关闭firewal ...

  4. 如何去掉list里重复的数据

    去掉list重复的数据,目前总结的以下三种方法,分别是采用set集合来做.两层循环不用任何方法来做,以及一层循环采用contains()方法来做,如下: 1.采用set结合来做: package te ...

  5. android之电话拨号器

    在android入门的案例中,除了HelloWorld这个经典案例,还有一个电话拨号器需要掌握,现在我就来个电话拨号器的示范,毕竟大牛也是从菜鸟进化而来的. 首先你应该知道自己要设置怎样的UI,然后创 ...

  6. zigbee学习之路(四):按键控制(中断方式)

    一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...

  7. 什么是 HTML?

    前言 在 W3C(万维网联盟)官网里,有一套针对于初学者的 HTML 培训教程,为期四周.为了提升自己的翻译水平,同时帮助大家入门,我给大家翻译出来,以供参考. 1. 什么是 HTML HTML 是创 ...

  8. Windows Internals学习笔记(八)IO系统

    参考资料: 1. <Windows Internals> 知识点: ● 当一个进

  9. 《BI那点儿事》META DATA(元数据)

    关于数据仓库的数据,指在数据仓库建设过程中所产生的有关数据源定义,目标定义,转换规则等相关的关键数据.同时元数据还包含关于数据含义的商业信息,所有这些信息都应当妥善保存,并很好地管理.为数据仓库的发展 ...

  10. Trick

    1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...