首页 > 代码库 > ExtJS常用代码集合
ExtJS常用代码集合
ExtJS常用代码集合，包括弹出提示框，登陆框，树状结构等等。
?1. [代码]弹出提示框
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/extjs/resources/css/ext-all.css" />
<script src="http://www.mamicode.com/js/extjs/adapter/ext/ext-base.js"></script>
<script src="http://www.mamicode.com/js/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(
function sayHello(){
Ext.Msg.show({
title: ‘Notice‘,
msg: ‘Hello World~‘,
buttons: {
yes: ‘Hello~‘,
no: true,
cancel: true
},
fn: function(btn) {
Ext.Msg.alert(‘You Clicked‘, btn);
}
});
}
);
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
2. [代码]树状结构图
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Tree</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//创建一棵树
var tree = new Ext.tree.TreePanel(
{
el: ‘tree‘, //表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上
//TreeLoader完成数据转换和装配节点的功能
loader: new Ext.tree.TreeLoader({dataUrl: ‘tree.txt‘})
}
);
//设置根节点
var root = new Ext.tree.AsyncTreeNode({text:‘中国‘});
tree.setRootNode(root);
tree.render(); //对树进行渲染
//只展开第一层节点
//root.expand();
//展开全部节点
root.expand(true,true);
}
);
</script>
</head>
<body>
<div id="tree" ></div>
</body>
</html>
3. [代码]树状结构图的源文件tree.txt
[
{
text:‘山东‘,
children:[
{text:‘青岛‘,leaf:true},
{text:‘济南‘,leaf:true}
]
},
{
text:‘北京‘,leaf:true
}
]
4. [代码]登录表单
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/ext-all.js"></script>
<style type="text/css">
body{
text-align: center;
}
#login_form {
width:317px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var user_types = new Ext.data.SimpleStore({
fields: [‘id‘, ‘user_type‘],
data : [[‘1‘,‘用户管理权限‘],[‘2‘,‘发卸货地操作员‘],[‘3‘,‘核销申请权限‘],[‘4‘,‘通关审核权限‘]]
});
//初始化form表单
var user_login = new Ext.FormPanel({
url: ‘‘, //最终提交的url
renderTo: ‘login_form‘,
frame: true,
labelAlign: ‘right‘,
title: ‘登陆‘,
items: [
{
xtype: ‘textfield‘,
fieldLabel: ‘用户名‘,
name: ‘username‘,
allowBlank: false,
width: 200,
},
{
xtype: ‘textfield‘,
fieldLabel: ‘密码‘,
name: ‘password‘,
allowBlank: false,
width: 200,
},
{
xtype: ‘combo‘,
name: ‘user_type‘,
fieldLabel: ‘用户类型‘,
mode: ‘local‘,
store: user_types,
displayField:‘user_type‘,
width: 200,
}
] ,
buttons: [
{
text: ‘登陆‘,
handler: function(){
user_login.getForm().submit({
success: function(f,a){
Ext.Msg.alert(‘Success‘, ‘登陆成功‘);
},
failure: function(f,a){
Ext.Msg.alert(‘Warning‘, ‘登陆失败‘);
}
});
}
},
{
text: ‘取消‘,
handler: function(){
user_login.getForm().reset();
}
}
]
});
});
</script>
</head>
<body>
<div id="login_form"></div>
</body>
</html>
5. [代码]导航栏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/extjs/ext-all.js"></script>
<script type="text/javascript">http://www.huiyi8.com/zhishipai/?
Ext.onReady(function(){指示牌
new Ext.Toolbar({
renderTo: ‘nav‘,
items:
[
{
xtype: ‘tbbutton‘,
text: ‘装货信息录入与报备‘,
menu: [
{
text: ‘货运申请‘,
handler: function(){
Ext.Msg.alert(‘提示‘, ‘你点击了 货运申请‘);
}
},
{
text: ‘收发货商家信息登记‘
},
]
},
{
xtype: ‘tbbutton‘,
text: ‘运途监控‘,
menu: [
{
text: ‘货运申请‘
},
]
},
{
xtype: ‘tbbutton‘,
text: ‘卸货信息录入与核查‘,
menu: [
{
text: ‘货运申请‘
},
]
},
{
xtype: ‘tbbutton‘,
text: ‘高速账单核查‘,
menu: [
{
text: ‘货运申请‘
},
]
},
{
xtype: ‘tbfill‘
},
{
xtype: ‘tbbutton‘,
text: ‘系统设置‘,
menu: [
{
text: ‘货运申请‘
},
]
},
{
xtype: ‘tbbutton‘,
text: ‘用户管理‘,
menu: [
{
text: ‘货运申请‘
},
]