`

extJS 一些简单实例

extJS 实例、已经相关的基础js 
阅读更多 
<!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>

 

分享到：
| 文本编辑器代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面，启动tomcat访问。简单的EXTJS mvc框架，设计 store，model，controller,view,window等等，同时展示了一些基本的点击显示、修改等等操作，需要的同学自行下载

    extjs四个例子，一个中文API

    新手学习，初学extjs时用刚刚好，里边有三个例子，还有一个我自己写的例子（简单粗暴动态菜单），还有一个中文API

    extjs 简单分页例子

    在这个“EXTJS简单分页例子”中，我们将深入探讨EXTJS如何实现分页功能，以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式，尤其在处理大量数据时，它可以提高页面加载速度并提供良好的用户体验。EXTJS...

    extjs简单例子

    这个“extjs简单例子”教程集合，显然旨在帮助初学者快速上手并理解ExtJS的基本概念和功能。下面，我们将详细探讨这些文件所涵盖的知识点。 1. **《TutorialIntroduction to Ext 2.0 (Chinese)》** 这个文档可能...

    extjs 弹窗的简单实例

    在“extjs 弹窗的简单实例”中，我们将探讨如何在ExtJS中创建和使用弹窗。 首先，理解ExtJS中的Window组件。Window是浮动的、可拖动的容器，通常用于显示临时信息或进行独立的操作。创建一个窗口，你需要定义一个...

    EXTJS 简单实例 (新手)

    EXTJS 很全的简单实例 仅供新手学习

    EXTjs 简单布局实例

    //实例菜单树形 menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', ...

    ExtJs入门实例(内含N个实例源码)

    ExtJS入门实例、包含各种详细代码，非常适合初学者学习

    Extjs2.0一些例子

    作为一个初学者，了解和学习这些例子可以帮助你快速掌握ExtJS的核心概念和技术。 1. **组件系统**：ExtJS 2.0的核心是其组件系统，它允许开发者创建可重用的UI部件，如窗口（Windows）、面板（Panels）、表格...

    一个简单的extjs+ssh实例

    3. **结合实例**：分析提供的实例代码，理解SSH如何处理请求，返回JSON数据，以及ExtJS如何解析这些数据并渲染界面。 4. **动手实践**：尝试修改实例，添加新的功能或组件，以此加深对SSH和ExtJS的理解。 5. **...

    初学extjs的小例子

    这里面有三个extjs的小例子，其中testb.html和testc.html所实现的效果是一样的，只不过testb.html里面的控件全是用extjs创建的，而testc.html是extjs与jsp的结合。例子很简单，主要记录自己每天的成长经历！

    ExtJs应用简单实例

    包里有说明，直接可以运行，相关包齐全。。。。。。。。。。。。。。。。。。

    ExtJS简单实例

    ExtJS简单实例,采json数据类型,NHibernate架构.

    extjs小例子

    这个项目可能包含了一些简单的EXTJS代码片段，演示了如何创建和配置EXTJS组件，以及如何组织和布局页面。 描述中的"我什么都不说，你们自己看着办。想下载就下吧！"虽然没有提供具体的信息，但暗示了这是一个无需...

    EXTJS修改颜色实例源码

    EXTJS 是一个基于 JavaScript 的富客户端应用框架，用于...EXTJS 提供了丰富的组件和事件处理机制，使得开发复杂的 Web 应用变得简单。对于初学者，这个实例是一个很好的起点，可以帮助理解 EXTJS 的基本概念和用法。

    .net+Extjs 实例

    Ext_Demo可能包含了从简单的按钮和窗口到复杂的表格和图表的各种示例，展示了如何在.NET环境下利用ExtJS的组件和功能创建功能丰富的Web应用。 总结来说，.NET和ExtJS的结合使得开发者能够在后端拥有强大的处理能力...

    ExtJs各组件简单应用例子导入到eclipse即可

    本示例主要关注如何将ExtJS的组件应用实例导入到Eclipse开发环境中，以便进行学习和开发。 在开始之前，确保你已经安装了Eclipse IDE，并且安装了支持JavaScript开发的插件，例如Eclipse for JavaScript Developers...

    SSH+ExtJs分页小例子

    在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...

    ExtJS布局之border实例

    资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...

Magicbox
Global site tag (gtag.js) - Google Analytics