Extjs]LiTableLayout

LiTableLayout：ul、li＋css

实现轻量级表格，快速简洁，不支持融合以及单元格定位设置。

/**/ /**
 * @class My.ui.LiTableLayout
 * @extends Ext.layout.ContainerLayout
 * @author zfzheng
 * 
 * 数据格式：
 *     items:[
      {html:'第一列',h:true},
      {html:'第2列',h:true},
      {html:'第3列',h:true},
      {html:'第4列',h:true},
   {html:'数据1-1'},
   {html:'数据1-2'},
   {html:'数据1-3'},
   {html:'数据1-4'},
   {html:'数据2-1'},
   {html:'数据2-2'},
   {html:'数据2-3'},
   {html:'数据2-4'},
   {html:'数据3-1'},
   {html:'数据3-2'},
   {html:'数据3-3'},
   //{html:'数据3-4'},
   {
    xtype:'datefield'   
   },
   {html:'数据4-1'},
   {html:'数据4-2'},
   {html:'数据4-3'},
   //{text:'数据4-4'}   
   {
    xtype:'button',
    text:'hello'
   }
  ];
 */

My.layout.LiTableLayout = Ext.extend(Ext.layout.ContainerLayout, ... {
 cellContentTpl:new Ext.Template('<li id="li-{0}" class="{1}" style="width:{2}%"></li>'),
    // private
    onLayout : function(ct, target)...{
  var cs = ct.items.items, len = cs.length, c, i;
        if(!this.innerCt)...{
            this.innerCt = target.createChild(...{tag:'ul',cls:'li-table'});
            this.renderAll(ct, this.innerCt);
            this.innerCt.createChild(...{cls:'x-clear'});
        }
    },
    
    // private
    renderAll : function(ct, target)...{
        var items = ct.items.items;
        var columnCount=0;
        for(var i = 0, len = items.length; i < len; i++) ...{
         if(items[i].h)...{
          columnCount++;
         }else...{
          //要求表头必须放在前面，以方便布局。
          break;
         }
        }
        if(columnCount==0)...{
         columnCount=4;//缺省
        }        
        //减1，留给css设置空隙。(若css设置过大，则减的百分比应大一点。)
        this.colsPercent=Math.floor(100/columnCount)-1;
        for(var i = 0, len = items.length; i < len; i++) ...{
            var c = items[i];
            if(c && (!c.rendered || !this.isValidParent(c, target)))...{
                this.renderItem(c, i, target);
            }
        }
    },
    
    // private
    renderItem : function(c, position, target)...{
        if(c && !c.rendered)...{
            if(this.extraCls)...{
                c.addClass(this.extraCls);
            }
            Ext.id(c);
            var cls=c.h?'li.th':'';
            this.cellContentTpl.append(target,[c.id,cls,this.colsPercent]);
            c.render('li-'+c.id);
            if (this.renderHidden && c != this.activeItem) ...{
                c.hide();
            }
        }else if(c && !this.isValidParent(c, target))...{         
            if(this.extraCls)...{
                c.addClass(this.extraCls);
            }
            if(typeof position == 'number')...{
                position = target.dom.childNodes[position];
            }
            target.dom.insertBefore(c.getEl().dom, position || null);
            if (this.renderHidden && c != this.activeItem) ...{
                c.hide();
            }
        }
    },
   
} );
Ext.Container.LAYOUTS[ ' litable ' ]  =  My.layout.LiTableLayout;

 css

 

.li-table  {...} {
 width:100%; 
 }

.li-table li.th  {...} {
 background:#999;
 font-color:red;
}

.li-table li,.li-table li.th  {...} {
 list-style-type:none;
  height:30px;
 line-height:30px;
 text-align:center;
 float:left;
 margin-left:1px;
 margin-bottom:1px;
 background:#ccc;
}