1. 爱易网页
  2. JavaSript
  3. Extjs4.0常见的几种格局详解

Extjs4.0常见的几种格局详解

日期：2014-05-16　 浏览次数：20313 次

Extjs4.0常见的几种布局详解



Ext.onReady(function() {

/**
* 1.auto布局使用（默认布局）
*/
var panel1 = Ext.create('Ext.panel.Panel', {
title : 'panel1',
html : 'panel1ddd',
height : 80,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : 'panel2',
html : 'panel2ffff',
height : 80,
width : 100
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : 'panel3',
html : 'panel3yyyy',
height : 80,
width : 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : 'panel4',
html : 'panel4GGG',
height : 80,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 420,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [panel1, panel2, panel3, panel4]
});
auto.show();


/**
* 2 anchor布局（按百分比显示）
*/
var panel5 = Ext.create('Ext.panel.Panel', {
title : 'panel5',
html : '100% 30%',
anchor : '100% 30%'
});
var panel6 = Ext.create('Ext.panel.Panel', {
title : 'panel6',
html : '100% 25%',
anchor : '1000% 25%'
});


var panel7 = Ext.create('Ext.panel.Panel', {
title : 'panel7',
html : '100% 15%',
anchor : '100% 15%'
});


var panel8 = Ext.create('Ext.panel.Panel', {
title : 'panel8',
html : '100% 30%',
ancho

相关资料更多>

  1. 谁能帮小弟我看看关于onsubmit的有关问题
  2. 帮忙写一个JS 函数！解决思路
  3. 如何学习js
  4. javascript 动态创建 <script> 节点所想到的其它有关问题
  5. 一张表单用到多个带提示的输入框该如何做
  6. jacascript弹出窗口后父页面的滚动条自动回到顶部。解决办法
  7. JavaScript正则表达式（2）
  8. 使用js开发IE浏览器当地插件
  9. 帮忙看google搜索框自动提示代码解决方法