EXTJS4自学手册——EXT组件布局

一、Dock 

说明：在组件的上下左右添加其他组件

通过dock属性设置添加的组件在原组件的位置

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        Ext.create('Ext.panel.Panel',{
            //将panel渲染到ID为myPanel的html控件上
            renderTo:'myPanel',
            width:400,
            height:400,
            title:'Dock',
            //新增组件
            dockedItems:[{
                xtype:'toolbar',
                //添加到当前组件上部
                dock:'top',
                items:{
                    xtype:'button',
                    text:'topButton'
                }
            },{
                xtype:'toolbar',
                //添加到当前组件下部
                dock:'bottom',
                items:{
                    xtype:'button',
                    text:'bottomButton'
                }
            },{
                xtype:'toolbar',
                //添加到当前组件左部
                dock:'left',
                items:{
                    xtype:'button',
                    text:'leftButton'
                }
            },{
                xtype:'toolbar',
                //添加到当前组件右部
                dock:'right',
                items:{
                    xtype:'button',
                    text:'rightButton'
                }
            }],
            items:[{
                html:'this is myPanel'
            }]
        })
    });
</script>

执行结果：

 

二、Tool

说明：生成工具图标，注意，只生成鼠标，按下的方法需要自定义

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        var panel1 = Ext.create('Ext.panel.Panel', {
width:500,
renderTo: 'myPanel',
html: '常见按钮',
title: '工具按钮',
tools: [{
type: 'close',
handler: function(){} //添加按下时的方法
},{
type: 'collapse'
},{
type: 'down'
},{
type: 'expand'
},{
type: 'gear'
},{
type: 'help'
},{
type: 'left'
},{
type: 'maximize'
},{
type: 'minimize'
},{
type: 'minus'
},{
type: 'next'
},{
type: 'pin'
},{
type: 'plus'
},{
type: 'prev'
},{
type: 'print'
},{
type: 'refresh'
},{
type: 'restore'
},{
type: 'right'
},{
type: 'save'
},{
type: 'search'
},{
type: 'toggle'
},{
type: 'unpin'
},{
type: 'up'
}]
});
    });
</script>

执行结果：