我看了很久,不知道问题在哪,求高手帮解决一下,谢谢!
代码如下:
extjs.js代码:Ext.onReady(function(){
var Toolbar = new Ext.Toolbar({//创建工具栏
renderTo:'toolbar',
width:400
});
Toolbar.addButton([{text:'新建'},{text:'打开'},
{text:'保存'}]);//加入按钮
Toolbar.addSeparator() //加入工具栏分隔符
Toolbar.addField(new Ext.form.TextField({//加入表单元素
width:50
}));
Toolbar.addFill()//加入一个充满工具栏的空白元素
Toolbar.addElement(Ext.get('a'));//加入一个Element元素
Toolbar.addSeparator();//加入工具栏分隔符
Toolbar.addText('静态文本')//加入一个简单字符串
});html代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXTJS练习</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/extjs/css/ext-all.css">
<script type="text/javascript" src="/extjs/js/ext-base.js"></script>
<script type="text/javascript" src="/extjs/js/ext-all.js"></script>
<script type="text/javascript" src="/extjs/js/extjs.js"></script>
</head>
<body>
<div id='toolbar' style="border:1px solid #FF0000"></div>
</body>
</html>
代码如下:
extjs.js代码:Ext.onReady(function(){
var Toolbar = new Ext.Toolbar({//创建工具栏
renderTo:'toolbar',
width:400
});
Toolbar.addButton([{text:'新建'},{text:'打开'},
{text:'保存'}]);//加入按钮
Toolbar.addSeparator() //加入工具栏分隔符
Toolbar.addField(new Ext.form.TextField({//加入表单元素
width:50
}));
Toolbar.addFill()//加入一个充满工具栏的空白元素
Toolbar.addElement(Ext.get('a'));//加入一个Element元素
Toolbar.addSeparator();//加入工具栏分隔符
Toolbar.addText('静态文本')//加入一个简单字符串
});html代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXTJS练习</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/extjs/css/ext-all.css">
<script type="text/javascript" src="/extjs/js/ext-base.js"></script>
<script type="text/javascript" src="/extjs/js/ext-all.js"></script>
<script type="text/javascript" src="/extjs/js/extjs.js"></script>
</head>
<body>
<div id='toolbar' style="border:1px solid #FF0000"></div>
</body>
</html>
以下测试可以:<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
Ext.onReady(function(){
var Toolbar = new Ext.Toolbar({//创建工具栏
renderTo:'toolbar',
width:400
});
Toolbar.addButton([{text:'新建'},{text:'打开'},
{text:'保存'}]);//加入按钮
Toolbar.addSeparator() //加入工具栏分隔符
Toolbar.addField(new Ext.form.TextField({//加入表单元素
width:50
}));
Toolbar.addFill()//加入一个充满工具栏的空白元素
Toolbar.addElement(Ext.get('a'));//加入一个Element元素
Toolbar.addSeparator();//加入工具栏分隔符
Toolbar.addText('静态文本')//加入一个简单字符串});
</script>
<div id='toolbar' style="border:1px solid #FF0000"></div>
<div id="a">div a</div>
Ext.onReady(function(){
var toolBar = new Ext.Toolbar({//创建工具栏
//renderTo:'toolbar',
width:400
});
toolBar.addButton([{text:'新建'},{text:'打开'},
{text:'保存'}]);//加入按钮
toolBar.addSeparator() //加入工具栏分隔符
toolBar.addField(new Ext.form.TextField({//加入表单元素
width:50
}));
toolBar.addFill()//加入一个充满工具栏的空白元素
toolBar.addElement(Ext.get('a'));//加入一个Element元素
toolBar.addSeparator();//加入工具栏分隔符
toolBar.addText('静态文本')//加入一个简单字符串
new Ext.Panel({
renderTo:'toolbar',
width:500,
height:300,
tbar:toolBar
});
});
直接给toolBar设调试你会发现里面是空的,去掉renderTo那一句,在最后加一句:
toolBar.render("toolbar");