动态创办Layout _Web前端

动态创建Layout
一开始是怎么都不能动态增加的,后来看到了http://bbs.btboys.com/thread-638-1-1.html,才把问题解决.

<body>
	<div id="cc" style="width:600px;height:400px;">
		<div region="center" title="center title" style="padding:5px;background:#eee;">4</div>
	</div>
</body>

js代码:

/**
 * $('#cc').layout();//一定先运行这句来实例化,下面才能动态增加部件,同时,html一定先存在一个region 就是center,否则会报错  
 * @param {Object} '#cc'
 */
$(document).ready(function(){
    $('#cc').layout();
	  
	$('#cc').layout('add', {
        region: 'west',
        width: 180,
        title: 'WEST Title',
        split: true,
        tools: [{
            iconCls: 'icon-add',
            handler: function(){
                alert('add')
            }
        }, {
            iconCls: 'icon-remove',
            handler: function(){
                alert('remove')
            }
        }]
    });
	$('#cc').layout('add', {
        region: 'east',
        width: 180,
        title: 'EAST Title',
        split: true,
        tools: [{
            iconCls: 'icon-add',
            handler: function(){
                alert('add')
            }
        }, {
            iconCls: 'icon-remove',
            handler: function(){
                alert('remove')
            }
        }]
    });
	$('#cc').layout('add', {
        region: 'north',
        width: 180,
		height:100,//这个一定存在
        title: 'NORTH Title',
        split: true,
        tools: [{
            iconCls: 'icon-add',
            handler: function(){
                alert('add')
            }
        }, {
            iconCls: 'icon-remove',
            handler: function(){
                alert('remove')
            }
        }]
    });
	$('#cc').layout('add', {
        region: 'south',
        width: 180,
		height:100,//这个一定存在
        title: 'SOUTH Title',
        split: true,
        tools: [{
            iconCls: 'icon-add',
            handler: function(){
                alert('add')
            }
        }, {
            iconCls: 'icon-remove',
            handler: function(){
                alert('remove')
            }
        }]
    });
});