extjs 中doLayout()运用
日期：2014-05-16 浏览次数：20409 次
extjs 中doLayout()使用
在网上看了很多人抄的一个实例，生成menu 相关的文件名为MenuExt.html，与MenuExt.js 但是大多数抄的文章多少了一句 tb.doLayout(); 导致页面没有任何效果，正确的做法是。在 tb.add({
text: 'Ext菜单测试',
iconCls: 'bmenu',
//注入菜单
menu: menu
});
加tb.doLayout(); 说明一下。这个方法的作用就是：当某个组件调用add( Ext.Component/Object component ) : Ext.Component
往组件里填新东西的时候，必须在调用doLayout()方法，更新一下布局，才能看的见刚加入的组件。
还是希望网上的朋友能够把确实可用的代码放上去。
我把我的代码贴出来
MenuExt.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MenuExt</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="toolbar"></div>
</body>
</html>
MenuExt.js：
Ext.onReady(function(){
Ext.QuickTips.init();
//菜单选项
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');
}
});
var colorMenu = new Ext.menu.ColorMenu({
id: 'colorMenu',
handler: function(cm, color){
var rgb=Ext.color.hexToRGB(color);
Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');
}
});
function onItemCheck(item, checked){
Ext.MessageBox.alert('选择', '当前点选[' + item.text + '],状态为 ' + (checked ? 'checked' : 'unchecked'), '');
}
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [{
text: '选项1',
//默认为选中
checked: true,
//选中处理方式为onItemCheck
checkHandler: onItemCheck
}, {
text: '选项2',
checked: true,
checkHandler: onItemCheck
}, {
text: '选项3!',
checked: true,
checkHandler: onItemCheck
}, //分隔菜单
'-', {
text: '单选菜单',
menu: {
items: [{
text: 'A',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'B',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'C',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'D',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}]
}
}, {
text: '日期选择',
iconCls: 'calendar',
menu: dateMenu
}, {
text: '颜色选择',
menu: colorMenu
}]
});
//创建工具栏
var tb = new Ext.Toolbar();
//绑定到toolbar元素
tb.render('toolbar');
//添加菜单
tb.add({
text: 'Ext菜单测试',
iconCls: 'bmenu',
//注入菜单
menu: menu
});
tb.doLayout();
});
// 自定义函数，用于从color event中提取所选数值
Ext.color = function(){
var result = '';
var bool = true;
var formatValue = function(obj){
if (bool) {
var obj = Array.prototype.slice.call(arguments, 0);
result = String.format('{0}', obj);
}
bool = !bool;
return result;
}
var hexTodec = function(hexchar){
return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
}
return {
value: function(obj){
return formatValue(obj);
},
hexToRGB: function(color){
color = formatValue(color);
var now = color.replace("#", "");
return {
R: (hexTodec(now.substr(0, 1)) * 16) + hexTodec(now.substr(1, 1)),
G: (hexTodec(now.substr(2, 1)) * 16) + hexTodec(now.substr(3, 1)),
B: (hexTodec(now.substr(4, 1)) * 16) + hexTodec(now.substr(5, 1))
}
},
init: function(){
}
};
}
();
Ext.onReady(Ext.color.init, Ext.color);
在网上看了很多人抄的一个实例，生成menu 相关的文件名为MenuExt.html，与MenuExt.js 但是大多数抄的文章多少了一句 tb.doLayout(); 导致页面没有任何效果，正确的做法是。在 tb.add({
text: 'Ext菜单测试',
iconCls: 'bmenu',
//注入菜单
menu: menu
});
加tb.doLayout(); 说明一下。这个方法的作用就是：当某个组件调用add( Ext.Component/Object component ) : Ext.Component
往组件里填新东西的时候，必须在调用doLayout()方法，更新一下布局，才能看的见刚加入的组件。
还是希望网上的朋友能够把确实可用的代码放上去。
我把我的代码贴出来
MenuExt.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MenuExt</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="toolbar"></div>
</body>
</html>
MenuExt.js：
Ext.onReady(function(){
Ext.QuickTips.init();
//菜单选项
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');
}
});
var colorMenu = new Ext.menu.ColorMenu({
id: 'colorMenu',
handler: function(cm, color){
var rgb=Ext.color.hexToRGB(color);
Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');
}
});
function onItemCheck(item, checked){
Ext.MessageBox.alert('选择', '当前点选[' + item.text + '],状态为 ' + (checked ? 'checked' : 'unchecked'), '');
}
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [{
text: '选项1',
//默认为选中
checked: true,
//选中处理方式为onItemCheck
checkHandler: onItemCheck
}, {
text: '选项2',
checked: true,
checkHandler: onItemCheck
}, {
text: '选项3!',
checked: true,
checkHandler: onItemCheck
}, //分隔菜单
'-', {
text: '单选菜单',
menu: {
items: [{
text: 'A',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'B',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'C',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'D',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}]
}
}, {
text: '日期选择',
iconCls: 'calendar',
menu: dateMenu
}, {
text: '颜色选择',
menu: colorMenu
}]
});
//创建工具栏
var tb = new Ext.Toolbar();
//绑定到toolbar元素
tb.render('toolbar');
//添加菜单
tb.add({
text: 'Ext菜单测试',
iconCls: 'bmenu',
//注入菜单
menu: menu
});
tb.doLayout();
});
// 自定义函数，用于从color event中提取所选数值
Ext.color = function(){
var result = '';
var bool = true;
var formatValue = function(obj){
if (bool) {
var obj = Array.prototype.slice.call(arguments, 0);
result = String.format('{0}', obj);
}
bool = !bool;
return result;
}
var hexTodec = function(hexchar){
return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
}
return {
value: function(obj){
return formatValue(obj);
},
hexToRGB: function(color){
color = formatValue(color);
var now = color.replace("#", "");
return {
R: (hexTodec(now.substr(0, 1)) * 16) + hexTodec(now.substr(1, 1)),
G: (hexTodec(now.substr(2, 1)) * 16) + hexTodec(now.substr(3, 1)),
B: (hexTodec(now.substr(4, 1)) * 16) + hexTodec(now.substr(5, 1))
}
},
init: function(){
}
};
}
();
Ext.onReady(Ext.color.init, Ext.color);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
