extJS 一些简单实例

最新推荐文章于 2021-06-29 21:37:48 发布
最新推荐文章于 2021-06-29 21:37:48 发布
阅读量126 收藏
点赞数
文章标签： extJS 实例、已经相关的基础js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizhihui1987/article/details/84174980
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹出窗体的测试</title>
    <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 tabs = new Ext.TabPanel({
	//applyTo: 'tabs', //这里将把我们自己创建的id 为tabs 的div 渲染成tabs
	activeTab: 0,
	deferredRender: false,
	autoTabs: true,
	items: [{
        title: 'Tab 1',
        html: 'A simple tab',
        closable: true,
         listeners: {
                'beforeclose':conrirmTab
            }
    },{
        title: 'Tab 2',
        html: 'Another one',
        closable: true,
        listeners: {
                'beforeclose':conrirmTab
            }
    }]
	});
    
	var win = new Ext.Window({
	title:'弹出窗体测试',
	el:'content',//将此div 创建成窗体对象
	layout:'fit',//布局
	width:500,
	height:300,
	closeAction:'hide',//设置是否可以关闭
	plain: true,
	draggable:false,
	maximizable:true,
	minimizable:true,
	modal:false,
	onEsc:function aa(){
		Ext.Msg.alert('aaa');
	},
	resizable:false,
	collapsible:true,
	plain:true,
	items:tabs
	});
	function conrirmTab(e){
		Ext.Msg.confirm('操作确认','操作确认',
			function(btn,text){
				if(btn=='yes'){
				tabs.remove(e);
			}
			});
		return false;
	}
	win.show(Ext.getBody());//在body 中渲染此窗体
	});
    </script>
</head>
<body>
<div id="content">
</div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tab多项框体的测试</title>
    <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 tabs = new Ext.TabPanel({
	applyTo: 'tabs',
	activeTab: 0,
	deferredRender: false,
	autoTabs: true,
	draggable:true,
	items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
	});
	});
    </script>
</head>
<body>
<div id='tabs'>
<div class='x-tab' title='The First Tab'>这里是The First Tab 的内容区</div>
<div class='x-tab' title='The Second Tab'>这里是The Second Tab 的内容区</div>
</div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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(){ 
new Ext.Panel({
renderTo:document.body,
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true 
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
}
);
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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(){ 
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"}
]
}); 
});
</script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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 panel=new Ext.Panel({
renderTo:document.body,
title:"容器组件",
width:500,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true 
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
],
buttons:[{text:"切换",handler:changeTab}]
}
);
var i=1;
function changeTab()
{ 
panel.getLayout().setActiveItem(i++); 
if(i>2)i=0;
}
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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(){ 
new Ext.Panel({
renderTo:document.body,
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:200},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.4}
]
}
);
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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(){ 
new Ext.Panel({
renderTo:document.body,
title:"容器组件",
width:500,
height:300,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]
}
);
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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(){
new Ext.Panel({
		renderTo:document.body,		
		title:"面板头部header",		
		width:300,		
		height:200,		
		html:'<h1>面板主区域</h1>',		
		tbar:[{pressed:true,text:'顶部工具栏topToolbar'}],		
		bbar:[{text:'底部工具栏bottomToolbar'}],		
		buttons:[{text:"按钮位于footer"}]		
		}); 
		});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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 MyRecord = Ext.data.Record.create([
	    {name: 'title'},
	    {name: 'username', mapping: 'author'},
	    {name: 'loginTimes', type: 'int'},
	    {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
		]);
	var r=new MyRecord({
		title:"日志标题",
		username:"easyjf",
		loginTimes:100,
		loginTime:new Date()
	});	
	alert(MyRecord.getField("username").mapping);
	alert(MyRecord.getField("lastLoginTime").type);
	alert(r.data.username);
	alert(r.get("loginTimes"));
 });
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Accordion布局的测试</title>
    <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 panel=new Ext.Panel({
renderTo:document.body,
title:"容器组件",
width:500,
height:200,
layout:"table", 
layoutConfig: {
columns: 3 
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
]
}
);
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tab多项框体的很多项测试</title>
    <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 type="text/javascript"  src="ExtJS/TabScrollerMenu.js" ></script>
	<script type="text/javascript"  src="ExtJS/tab-scroller-menu.js" ></script>
</head>
<body>
<div id="aa"></div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>可折叠的div</title>
    <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 divContent=new Ext.Panel({
		renderTo:'aa',
		contentEl:'content',
		//html:'热忠于编程,尤其是java相关软件开发',
		width:400,
		height:200,
		title: 'My Panel',
		collapsible:true //显示可收缩的图标,此panel 可以收缩
	});
	
});
</script>
</head>

<body>
<div id="aa">
<div id="content">
热忠于编程,尤其是java相关软件开发，有良好的代码编写习惯，能够熟练运用java语言独立完成模块任务的设计和开发。
</div>
</div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>多个组件的组合</title>
    <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(){
//1.首先我们创建tab
var tabs = new Ext.TabPanel({
el: 'tabs',//tab容器注意这里，这里和前面的介绍是不一样的，这里不会立即渲染这个tab
activeTab: 0,
deferredRender: false,
autoTabs: true,
region: 'center', //请注意这里，这里用到了布局
margins:'3 3 3 0',
defaults:{autoScroll:true}
});
//2.创建一个panel
var nav = new Ext.Panel({
el: 'nav',
title: 'Navigation',
layout:'accordion', // 注意这个面板的布局
region: 'west', // 注意这个面板将在window 中的布局位置
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3',
layoutConfig:{
animate:true //注意这里的动画效果
},
items: [{
contentEl: 't1',
title: 'I am no.1'
},{
contentEl: 't2',
title: 'I am no.2'
}]
});
//3.创建窗体
var win = new Ext.Window({
el: 'win',
layout:'border',//布局北，南，东，西，中布局方法
closeAction:'hide',//设置是否可以关闭
plain: true,
width:600,
height:350,
items: [nav,tabs] //这个窗体包含的组件，各个组件在window 中的布局已经在每个组
});
win.show(Ext.getBody());//在body 中渲染此窗体
});
</script>
</head>
<body>
<!-- window panel-->
<div id='win'>
<!-- window header -->
<div class='x-window-header'>Layout window</div>
</div>
<!-- navigation panel-->
<div id='nav'>
<div id='nav-content'>
<div id='t1'>I am the content area of t1</div>
<div id='t2'>I am the content area of t2</div>
</div>
</div>
<!-- tabs panel -->
<div id='tabs'>
<div class='x-tab' title='First'>I am the content area of Fisrt tab</div>
<div class='x-tab' title='Second'>I am the content area of Second tab</div>
</div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tab多项框体的测试</title>
    <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 tab = new Ext.form.DateField({
		
	});
	var con=new Ext.form.FieldSet({
		renderTo:'content',
		width: 400,
    	height: 250,
    	layout: 'form',
    	title:'My Fields',
		items:tab
	});
	});
    </script>
</head>
<body>
<div id='content'>
</div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ExtJs表单的测试</title>
    <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>
    <style>
    .b1{align:center;}
    </style>
    <script>
    Ext.onReady(function(){
    Ext.QuickTips.init();
var myForm2 = new Ext.form.FormPanel({
renderTo:document.body,
width:650,
height:350,
frame:true,
title: 'Simple Form',
buttonAlign:'center',
labelAlign : 'right',
//onSubmit: function(){alert('dd')},
//submit: function() {
//alert('submit');
//},
defaultType: 'textfield',
items: [{
fieldLabel: 'mylabel'
},{
xtype:'checkbox',
fieldLabel: 'mycheckbox',
boxLabel: 'cc'
},{
xtype:'combo',
emptyText:'Select a state...',
 store: new Ext.data.ArrayStore({
        id: 0,
        fields:['myId','displayText'],
        data:  [[1, 'item1'], [2, 'item2'],[3, 'ikkkk']]
    }),
    mode: 'local',
    fieldLabel: 'myselect11',
    valueField: 'myId',
    displayField: 'displayText'
},{
fieldLabel: 'mytext-area',
anchor: '60%',
height:'50'
},{
xtype: 'htmleditor',
fieldLabel: 'myhtmleditor',
height: 100
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
myForm2.getEl().center();
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ExtJs树形菜单的测试</title>
    <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(){
Ext.QuickTips.init();
//创建一颗静态树
var tree = new Ext.tree.TreePanel({
animate:true, //允许动画效果
containerScroll: true, //是否树太高时容器自动添加滚动条
rootVisible:true, //根节点是否可视这里设置为可视
width:200,
height:200,
split:true,
title:'My Tree',
autoScroll:true
});
//创建上面树的节点对象
var root = new Ext.tree.TreeNode({
text: '根节点',
allowDrag:true,
allowDrop:true
});
tree.setRootNode(root);//设置为根节点
//创建一颗二级树节点，然后把它添加到上面创建的树中去
var anewroot = new Ext.tree.TreeNode({
text: '2',
allowDrag:true,
allowDrop:true
});
anewroot.appendChild(
[new Ext.tree.TreeNode({text:'叶子2-1', cls:'album-node', allowDrag:true}),
new Ext.tree.TreeNode({text:'叶子2-2', cls:'album-node', allowDrag:true}),
new Ext.tree.TreeNode({text:'叶子2-3', cls:'album-node', allowDrag:true})]
);
//创建根节点的子节点节点
root.appendChild(new Ext.tree.TreeNode({text:'叶子1', cls:'album-node', allowDrag:true}));
root.appendChild(new Ext.tree.TreeNode({text:'叶子2', cls:'album-node', allowDrag:true}));
root.appendChild(new Ext.tree.TreeNode({text:'叶子3', cls:'album-node', allowDrag:true}));
root.appendChild(anewroot);
//树节点是否可以编辑
var ge = new Ext.tree.TreeEditor(tree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});
/*
var panel = new Ext.Panel({
layout: 'border',
width:650,
height:400,
renderTo:document.body,
items: tree
});
*/
tree.render(Ext.getBody());
});
    </script>
</head>
<body>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MessageBox的测试</title>
    <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(){
    Ext.get('mb1').on('click', function(e){
        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
    });
    
    Ext.get('mb2').on('click', function(e){
        Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
    });

    Ext.get('mb3').on('click', function(e){
        Ext.MessageBox.show({
           title: 'Address',
           msg: 'Please enter your address:',
           width:300,
           buttons: Ext.MessageBox.OKCANCEL,
           multiline: true,
           fn: showResultText,
           animEl: 'mb3'
       });
    });

    Ext.get('mb4').on('click', function(e){
        Ext.MessageBox.show({
           title:'Save Changes?',
           msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
           buttons: Ext.MessageBox.YESNOCANCEL,
           fn: showResult,
           animEl: 'mb4',
           icon: Ext.MessageBox.QUESTION
       });
    });

    Ext.get('mb6').on('click', function(){
        Ext.MessageBox.show({
           title: 'Please wait',
           msg: 'Loading items...',
           progressText: 'Initializing...',
           width:300,
           progress:true,
           closable:false,
           animEl: 'mb6'
       });

       // this hideous block creates the bogus progress
       var f = function(v){
            return function(){
                if(v == 12){
                    Ext.MessageBox.hide();
                    Ext.example.msg('Done', 'Your fake items were loaded!');
                }else{
                    var i = v/11;
                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
                }
           };
       };
       for(var i = 1; i < 13; i++){
           setTimeout(f(i), i*500);
       }
    });

    Ext.get('mb7').on('click', function(){
        Ext.MessageBox.show({
           msg: 'Saving your data, please wait...',
           progressText: 'Saving...',
           width:300,
           wait:true,
           waitConfig: {interval:200},
           icon:'ext-mb-download', //custom class in msg-box.html
           animEl: 'mb7'
       });
        setTimeout(function(){
            //This simulates a long-running operation like a database save or XHR call.
            //In real code, this would be in a callback function.
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'Your fake data was saved!');
        }, 8000);
    });

    Ext.get('mb8').on('click', function(){
        Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
    });

    //Add these values dynamically so they aren't hard-coded in the html
    Ext.fly('info').dom.value = Ext.MessageBox.INFO;
    Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
    Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
    Ext.fly('error').dom.value = Ext.MessageBox.ERROR;

    Ext.get('mb9').on('click', function(){
        Ext.MessageBox.show({
           title: 'Icon Support',
           msg: 'Here is a message with an icon!',
           buttons: Ext.MessageBox.OK,
           animEl: 'mb9',
           fn: showResult,
           icon: Ext.get('icons').dom.value
       });
    });

    function showResult(btn){
        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
    };

    function showResultText(btn, text){
        Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
    };
});
    </script>
</head>
<body>
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>

<p>
    <b>Confirm</b><br />
    Standard Yes/No dialog.
    <button id="mb1">Show</button>
</p>

<p>
    <b>Prompt</b><br />
    Standard prompt dialog.
    <button id="mb2">Show</button>
</p>

<p>
    <b>Multi-line Prompt</b><br />
    A multi-line prompt dialog.
    <button id="mb3">Show</button>
</p>

<p>
    <b>Yes/No/Cancel</b><br />
    Standard Yes/No/Cancel dialog.
    <button id="mb4">Show</button>
</p>

<p>
    <b>Progress Dialog</b><br />
    Dialog with measured progress bar.
    <button id="mb6">Show</button>
</p>

<p>
    <b>Wait Dialog</b><br />
    Dialog with indefinite progress bar and custom icon (will close after 8 sec).
    <button id="mb7">Show</button>
</p>

<p>
    <b>Alert</b><br />
    Standard alert message dialog.
    <button id="mb8">Show</button>
</p>

<p>
    <b>Icons</b><br />
    Standard alert with optional icon.
    <select id="icons">
        <option id="error" selected="selected">Error</option>
        <option id="info">Informational</option>
        <option id="question">Question</option>
        <option id="warning">Warning</option>
    </select>
    <button id="mb9">Show</button>
</p>
</body>
</html>

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>GMap Window Example</title>

<!-- GMaps API Key that works for dev.sencha.com -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
<!-- GMaps API Key that works for localhost -->
<!--<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w" type="text/javascript"></script>-->

<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 src="ux/GMapPanel.js"></script>
    <script src="gmap.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="shared/examples.css" />

    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<h1>GMap Window</h1>
<p>This example shows how to create an extension and utilize an external library.</p>
<input type="button" id="show-btn" value="Gimme a Map" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="../ux/GMapPanel.js">GMapPanel.js</a> and <a href="gmap.js">gmap.js</a> for the full source code.</p>

</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Hello World Window Example</title>
    <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 language="javascript" src="hello.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="shared/examples.css" />

    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
    <script>
    Ext.onReady(function() {
	var myData = [
		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
		['Ext',83.81,0.28,0.34,'9/12 12:00am'],		
		['Google',71.72,0.02,0.03,'10/1 12:00am'],		
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],		
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	]; 	
	var myReader = new Ext.data.ArrayReader({},
	 [
		{name: 'company'},
		{name: 'price', type: 'float'},		
		{name: 'change', type: 'float'},		
		{name: 'pctChange', type: 'float'},		
		{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	]); 	
	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({
			data: myData,
			reader: myReader
		}),		
		columns: [
			{header: "Company",width: 120, sortable: true, dataIndex: 'company'},			
			{header: "Price", width: 90, sortable: true, dataIndex: 'price'},			
			{header: "Change", width: 90, sortable: true, dataIndex: 'change'},			
			{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},			
			{header: "Last Updated", width: 120, sortable: true,renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}
		],		
		viewConfig: {
			forceFit: true
		},		
		renderTo: 'content',		
		title: 'My First Grid',		
		width: 500,		
		frame: true,
		height:300
	}); 	
	grid.getSelectionModel().selectFirstRow();});
    </script>
</head>
<body>
<div id="content"></div>
</body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<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>   
	 
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">   
Ext.onReady(function() {   
    Ext.QuickTips.init(); 
    Ext.form.Field.prototype.msgTarget = 'side';   
    var loginForm = new Ext.FormPanel( {   
        renderTo : document.body,   
        title : '人事管理系统登录处',   
        bodyStyle : 'padding:5px 5px 0;',
        frame : true,   
        labelAlign : 'right',   
       labelWidth : 75,   
        width : 300,   
                html : '<div align="right" style="width:94%"><a href="">忘记密码?</a></div>',   
       defaultType : 'textfield',   
       defaults : {   
            width : 180   
        },   
        items : [ {   
           fieldLabel : '用户名',   
            name : 'loginName',
            id:'loginName',
            blankText:"用户名不能为空",   
           allowBlank : false  
        }, {   
           fieldLabel : '密码',   
            name : 'passWord', 
            id:'passWord',  
            inputType : 'password',
            blankText:"密码不能为空",   
           allowBlank : false  
        }],   
  
        buttons : [ {   
            text : '登录',   
           handler : function login() {  
                if (loginForm.form.isValid()) {  
	               var username_=Ext.getCmp('loginName').getValue();
	        	   var password_=Ext.getCmp('passWord').getValue(); 
                   Ext.MessageBox.wait('正在登录中,请稍候……','温馨提示');   
                   Ext.Ajax.request({
                     url:'Login?action=2',
                     method:'post',
                        success: function(response, action) {   
                           var sf=response.responseText;
                           Ext.Msg.alert('温馨提示',sf);
                        },   
                        failure: function(response, action){   
                            Ext.Msg.alert('温馨提示',sf);   
                       },
                       params:{
            			 username:username_,//传递给后台的参数
            			 password:password_
          			   }  
                   }); 
               }   
            }   
       }, {   
            text : '重置',   
            handler : function reset() {   
                loginForm.form.reset();   
            }   
        },{
        	text:'注册',
        	handler: function register(){
        		if (loginForm.form.isValid()){
        		var username_=Ext.getCmp('loginName').getValue();
        		var password_=Ext.getCmp('passWord').getValue();
        		Ext.MessageBox.wait('正在提交注册中,请稍后……','提交中');
        		Ext.Ajax.request({
          			url:"Login?action=1",
          			method:"post",
          			success:function(response,msg){
	                	var sf=response.responseText;
	                	Ext.Msg.alert("温馨提示",sf);
               		},
          			failure:function(response,opts){
          				Ext.Msg.alert("温馨提示","注册失败");
          			},
         			params:{
            			 username:username_,//传递给后台的参数
            			 password:password_
          			}
     			});
     			}
        	}
        }]   
    });   
  
    loginForm.getEl().center();   
});  
</script>
  </head>
  
  <body>
   
  </body>
</html>

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<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 type="text/javascript" src="msg-box.js"></script>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="shared/examples.css" />

    <style type="text/css">
        .x-window-dlg .ext-mb-download {
            background:transparent url(images/download.gif) no-repeat top left;
            height:46px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="shared/examples.js"></script><!-- EXAMPLES -->
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>

<p>
    <b>Confirm</b><br />
    Standard Yes/No dialog.
    <button id="mb1">Show</button>
</p>

<p>
    <b>Prompt</b><br />
    Standard prompt dialog.
    <button id="mb2">Show</button>
</p>

<p>
    <b>Multi-line Prompt</b><br />
    A multi-line prompt dialog.
    <button id="mb3">Show</button>
</p>

<p>
    <b>Yes/No/Cancel</b><br />
    Standard Yes/No/Cancel dialog.
    <button id="mb4">Show</button>
</p>

<p>
    <b>Progress Dialog</b><br />
    Dialog with measured progress bar.
    <button id="mb6">Show</button>
</p>

<p>
    <b>Wait Dialog</b><br />
    Dialog with indefinite progress bar and custom icon (will close after 8 sec).
    <button id="mb7">Show</button>
</p>

<p>
    <b>Alert</b><br />
    Standard alert message dialog.
    <button id="mb8">Show</button>
</p>

<p>
    <b>Icons</b><br />
    Standard alert with optional icon.
    <select id="icons">
        <option id="error" selected="selected">Error</option>
        <option id="info">Informational</option>
        <option id="question">Question</option>
        <option id="warning">Warning</option>
    </select>
    <button id="mb9">Show</button>
</p>
</body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	 <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>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style>
body{
font-size:13px;
}
</style>
  </head>
  <script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"企业菜单",
width:200,
height:300,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"菜单一",html:"这是子元素1中的内容"},
{title:"菜单二",html:"这是子元素2中的内容"},
{title:"菜单三",html:"这是子元素3中的内容"},
{title:"菜单四",html:"这是子元素4中的内容"},
{title:"菜单五",html:"这是子元素5中的内容"},
{title:"菜单六",html:"这是子元素6中的内容"}
] }
);
});
  </script>
  <body> 
   <div id="hello" style="margin:2px"></div>
  </body>
</html>

 

<html><head>         
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">         
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page"> 
 <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
   <style type="text/css">
   <!--div { background-color: #F06; height: 100px; width: 300px;}
   .myc { background-color: blue;}-->  
   </style>    
   <script src="jquery-1.4.js" type="text/javascript"></script>
   <script type="text/javascript"> 
   $(function(){      
   $("#load").click(function(){
          $("div").toggleClass("myc");      
           //$.get(        //"json",        
           //{a:1,b:2},        //function(data){         
           //alert(data);        //}       
           //);       
           $.ajax({       
            type:"get",                         
            url:"JSONAction",                               
            data:"a=1&b=2&c=3",                     
            dataType:"json",                      
             success:function(data){                    
              var items=data.list;         
              for(var i =0;i<items.length;i++)         
              {          
              var item=items[i];          
              //alert(item.username);          
              $("#tar").append("用户名："+item[0]+"<p>密码："+item[1]);
               };                                
               }       
               });      
               }); 
               });
               </script>
                 </head>
                     <body>
           <input type="button" value="点击以加载页面" id="load">          
<div id="tar"></div>  </body></html>

 

lizhihui1987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
extjs所有例子demo
08-26
老师做好的ppt教程 每节课发的例子 还有一些帮助 自己看看把
EXTJS官方实例大全.rar
07-10
EXTJS官方实例大全，包含表单类、桌面应用类、菜单类、游戏特效类等等，运行环境：HTML/ASP.NET、PHP、JSP等，示例截图展示的是一个TAB选项卡以及Windows界面菜单等，是不是很漂亮，更多实例效果请下载本压缩包自行查看。
ExtJS 学习总结 （二）-- 项目实例
isskingdom的专栏
09-08 2125
本文以项目实例来讲解使用ExtJS的MVVM架构开发的过程。本项目实例的开发环境是Tomcat+SpringMVC+Ibatis+ExtJS，其中Tomcat、SpringMVC与Ibatis的相关配置不在本文范围。在ExtJS中与后台接口交互的地方会简单阐述并给出示例代码。先上目录结构： css、imags和js等静态资源文件都要放在resources目录下面。resources/js/ex
EXTjs的案例（一）
UUID
03-20 2776
我把最近刚学的ext总结一下，方便自己以后查阅，大家有需要的也可以自己看。前面是一些基于4.0的用法，后面是工作中用到的案例基于3.0。 下面是一个登录页面的代码：（命名也不是很规范，因为当时着急出效果） (function(){ Ext.onReady(function() { var config = { fields:['province','post']
ExtJs grid使用详细
nxyc_twz
12-08 247
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
EXTJS简单MVC实例
12-19
只要将解压的文件直接放置到myeclipse的webroot下面，启动tomcat访问。简单的EXTJS mvc框架，设计 store，model，controller,view,window等等，同时展示了一些基本的点击显示、修改等等操作，需要的同学自行下载
ExtJS简单实例
11-11
ExtJS简单实例,采json数据类型,NHibernate架构.
extjs 简单分页例子
01-25
extjs 简单分页例子。 只有js文件 后台 代码自己可以采用 觉得好的技术实现。
extjs简单例子
02-16
extjs简单例子，适合初学者
extjs 4.2.1 examples 官方例子
11-27
http://docs.sencha.com/extjs/4.2.1/ 参考这个 ，与这个一样
EXTJS 经典 案例
06-16
EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版
extjs4 项目例子
02-07
这个项目里面包含了本人从开始初学EXTJS4的全部事例：grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释，还有一个file.txt文件是本人的小小总结，还没完整。我也是一个第一次接触EXT的初学者，只希望能与大家共享、学习，许多不到的地方希望大家能体谅，用myeclipse8.6运行项目，数据库用mysql，大家给力，免费下载。
EXTJS 简单实例 (新手)
07-19
EXTJS 很全的简单实例 仅供新手学习
Extjs大型项目实例
12-25
Extjs大型项目
ExtJs项目创建
pathconquer的博客
06-29 397
官方网站：（国外网站比较慢） https://www.sencha.com/products/extjs/ 快速开始创建一个简单的ExtJS项目。 第一步：找到文档。 第二步：点击get started 第三步：npm方式下载ExtJS 全过程解析 （1）npm install -g @sencha/ext-gen npm:包管理工具，下载node.js附带。 -g表示全局安装 @sencha/ext-gen应该是安装sencha组件中ext-ge...
一个ExtJS实例
程序员小董的专栏
05-12 772
聊聊ExtJS 这几天接触了一个项目 前台用的是extjs 发现这个东西还是有点意思的  就把前台的部分 剥离了下来 有兴趣的朋友可以当做模板学习 不多说先上效果图 这篇文章 可以看作是ext知识的一个汇总 因此我不想讲太多细碎的知识点 但我会一一之命这些知识点在哪里可以找到 另一方面 ext细碎的知识点确实太多 自己没有精力也不想搞的太清楚 够用就行
extjs4实例
03-26
NULL 博文链接：https://wcf0987.iteye.com/blog/1166232
extjs的一个实例
10-25
利用ext的grid、form等组件实现了对学生信息的增删改查。并用饼状图对学生的男女比例进行了统计。
extjs 中文例子
最新发布
08-05
ExtJS 是一个流行的 JavaScript 库，...这个示例演示了如何使用 ExtJS 创建一个简单的中文窗口，并在其中显示一些文本内容。通过使用 ExtJS 的丰富组件和工具，我们可以轻松地构建出功能强大、美观的 web 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值