EXTJS4自学手册——EXT组件布局
来源:互联网 发布:下载贵金属分析软件 编辑:程序博客网 时间:2024/06/06 04:36
一、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>
执行结果:
- EXTJS4自学手册——EXT组件布局
- EXTJS4自学手册——EXT数据结构组件(store)
- EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)
- EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column)
- EXTJS4自学手册——EXT容器布局(Fit,Card,Border)
- EXTJS4自学手册——EXT数据结构组件(创建一个Model)
- EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互)
- EXTJS4自学手册——EXT数据结构组件(Model之间的关系)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理)
- EXTJS4自学手册——EXT对象选择
- EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范
- EXTJS4自学手册——EXT基本方法、属性(onReady、define、create)
- EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor)
- EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require)
- EXTJS4自学手册——页面控件(表单控件)
- EXTJS4自学手册——页面控件(树形控件)
- EXTJS4自学手册——页面控件(表格)
- WINCE6.0显示驱动模型介绍
- Android使用JNI实现Java与C之间传递数据
- EXTJS4自学手册——EXT容器布局(Fit,Card,Border)
- 验证码工具分享-PHP识别工具SECURIMAGE
- 关于交换两个变量的不用第三个变量 异或的问题
- EXTJS4自学手册——EXT组件布局
- HTML符号
- property animation
- EXTJS4自学手册——页面控件(表格)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理)
- 如何去除ecshop标题和网站底部的Powered by ECShop
- EXTJS4自学手册——EXT数据结构组件(store)
- WinCE显示驱动设计(一)
- EXTJS4自学手册——页面控件(表格的特性)