<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-2.0/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="../ext-2.0/ext-all.js" ></script>
<script>
//初始化
Ext.onReady(win);
/*Ext.onReady(function(){
Ext.MessageBox.alert("hello2", "hello world");
});*/
function fn(){
alert("ext日常工作");
}
function box(){
Ext.MessageBox.alert("hello", "hello world");
}
//面板
function myPanel(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'面板',
width:400,
height:300,
html:'面板panel内容'
});
}
//面板
function myPanel2(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'面板头部header',
width:400,
height:300,
html:'<h1>面板主区域</h1>',
tbar:[{
text:'顶部工具栏topToolBar'
}],
bbar:[{
text:'底部工具栏bottomToolBar'
}],
buttons:[{
text:'按钮位于footer'
}],
});
}
//面板编辑
function myPanel3(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'面板头部header',
width:400,
height:300,
items:[{
xtype:'htmleditor'
}],
});
}
//面板布局
function myPanel4(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:'column',
width:400,
height:300,
items:[{
columnWidth:.5,
title:'面板1'},
{columnWidth:.5,
title:'面板2'}],
});
}
//border布局
function myViewport(){
var myViewport = new Ext.Viewport({
renderTo:Ext.getBody(),
layout:'border',
items:[{
region:'north',
title:'north',
height:200,
minSize:100,
maxSize:120,
border:true,
split:true,
collapsible:true,
},
{
region:'south',
title:'south',
height:200,
minSize:100,
maxSize:120,
border:true,
split:true,
collapsible:true,
},
{
region:'east',
title:'east',
width:120,
minSize:120,
maxSize:200,
border:true,
split:true,
collapsible:true,
},
{
region:'west',
title:'west',
width:120,
minSize:120,
maxSize:200,
border:true,
split:true,
collapsible:true,
},
{
region:'center',
title:'center',
border:true,
split:true,
collapsible:true,
},]
});
}
//table布局
function myPanel5(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'table布局',
width:500,
height:200,
layout:'table',
layoutConfig:{
columns:3
},
items:[{
title:'子元素1',
html:'子元素1内容',
height:100,
rowspan:2
},
{
title:'子元素2',
html:'子元素2内容',
colspan:2
},
{
title:'子元素3',
html:'子元素3内容',
},
{
title:'子元素4',
html:'子元素4内容',
}]
});
}
//TabPanel标签面板
function myTabPanel(){
var myTabPanel = new Ext.TabPanel({
renderTo:Ext.getBody(),
width:400,
height:300,
activeTab:0,
items: [new Ext.Panel({
title:'面板1',
width:400,
height:300,
html:'面板1内容'}),
new Ext.Panel({
title:'面板2',
width:400,
height:300,
html:'面板2内容'}),
new Ext.Panel({
title:'面板3',
width:400,
height:300,
html:'面板3内容'}),]
});
}
//grid
function myGrid(){
//定义列
var cm = new Ext.grid.ColumnModel([
{header:'编号', dataIndex:'id'},
{header:'名称', dataIndex:'name'},
{header:'描述', dataIndex:'desc'}
]);
//定义数据
var data = [
['1','name1','desc1'],
['2','name2','desc2'],
['3','name3','desc3'],
['4','name4','desc4']
];
//定义数据源
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desc'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
ds:ds,
cm:cm,
width:300,
autoHeight:true
});
}
//树
function myTree(){
var root = new Ext.tree.TreeNode({
id:'root',
text:'树的根'
});
root.appendChild(new Ext.tree.TreeNode({
id:'c1',
text:'子节点1'
}));
root.appendChild(new Ext.tree.TreeNode({
id:'c2',
text:'子节点2'
}));
var tree = new Ext.tree.TreePanel({
renderTo:Ext.getBody(),
root:root,
width:100
});
}
//表单
function myForm(){
Ext.BLANK_IMAGE_URL='images/default/s.gif';
var formPanel = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
width:300,
x:200,
y:300,
frame:true,
cls:'text-align:center',
labelAlign:'center',
title:'login',
id:'loginId',
items:[{
xtype:'textfield',
fieldLabel:'用户名',
name:'uesrname',
blankText:'请输入用户名',
allowBlank:false,
msgTarget:'under'
},
{
xtype:'textfield',
fieldLabel:'密码',
name:'psw',
},
],
buttonAlgin:'center',
buttons:[{
xtype:'button',
text:'login',
scope:this,
handler:login
},
{
xtype:'button',
text:'reset',
scope:this,
handler:reset
},
]
});
//登陆
function login(){
formPanel.form.submit({
clientValidation:true,
waitMsg:'正在登录系统，请稍候...',
method:'post',
url:'http://www.baidu.com',
//成功
success:function(form, action){
Ext.Msg.alert('提示', '系统登录成功');
},
//失败
failure:function(form, action){
Ext.Msg.alert('提示', '系统登录失败');
}
});
}
//重置
function reset(){
formPanel.form.reset();
}
}
//信息弹出
function msgAlert(){
Ext.Msg.alert('title','msg',function(btn){
alert('你刚才点击了' + btn);
});
}
function msgConfirm(){
Ext.Msg.confirm('title','msg',function(btn){
alert('你刚才点击了' + btn);
});
}
function msgPrompt(){
Ext.Msg.prompt('title','msg',function(btn,text){
alert('你刚才点击了' + btn + '输入' + text);
});
}
//多行提示
function msgShow(){
Ext.Msg.show({
title:'title',
msg:'msg',
buttons:Ext.MessageBox.OKCANCEL,
multiline:true,
width:300,
fn:function(btn,text){
alert('你刚才点击了' + btn + '输入' + text);
}
});
}
function msgShowDialog(){
Ext.Msg.show({
title:'title',
msg:'msg',
buttons:Ext.MessageBox.YESNOCANCEL,
animEl:'dialog',
fn:function(btn ){
alert('你刚才点击了' + btn );
}
});
}
function win(){
var win = new Ext.Window({
title:'window',
width:500,
height:300,
closable:true,
minimizable:true,
maximizable:true,
tools:[{id:'save'},{id:'unpin'},{id:'plus'}]
});
win.show(this);
}
</script>
</head>
<body>
</body>
</html>
相关推荐
Ext的入门示例代码!!!!!!!!!!!!!!!!!!!!
【标题】：“EXT入门程序登录例子” EXT是一个强大的JavaScript库，用于构建富客户端Web应用程序。这个入门程序是一个基于EXTJS的登录示例，它在不依赖数据库的情况下展示了用户登录的基本功能。EXTJS以其丰富的...
### ext入门必学知识点详解 #### 一、Ext框架概览与起源 **知识点1：Ext框架起源** Ext最初作为YUI（Yahoo User Interface Library）的扩展存在，名为YUI.Ext，随后发展成为一个独立的JavaScript框架，不再依赖于...
【 DotNet + Ext 入门 】 在 IT 领域，DotNet 是微软公司推出的一种全面的开发框架，用于构建各种类型的应用程序，而 Ext 是一个基于 JavaScript 的富客户端框架，尤其在创建桌面级 Web 应用时非常强大。本篇文章...
在"Ext技术入门篇详细讲解"中，我们将深入探讨如何利用EXT技术来实现BS（Browser/Server）架构下与CS（Client/Server）架构相媲美的漂亮界面。 EXT技术的核心优势在于它提供了丰富的组件库，包括表格、树形视图、...
### ExtJS 入门知识点详解 #### 一、ExtJS 是什么？ ExtJS是一个功能强大的JavaScript框架，专门设计用于在客户端构建丰富的Web应用程序界面。它不仅支持开发RIA（Rich Internet Applications，即富互联网应用程序...
然后，编写JavaScript代码，例如`hello.js`，使用`Ext.onReady`函数确保在DOM加载完成后执行代码。这个函数允许在页面完全加载后对元素进行操作，避免了因元素未加载导致的问题。在这个例子中，为id为`mb1`的按钮...
【EXT入门必学】 EXT，全称为Ext JS，是一个强大的JavaScript库，专为企业级Web应用设计，能够构建具有复杂布局和美观界面的应用程序。EXT最初是YUI（Yahoo! User Interface Library）的一个扩展，名为YUI.Ext，但...
【Ext入门学习】 ExtJS是一个JavaScript框架，专为构建具有丰富用户界面的Web应用程序而设计。它最初由Jack Slocum开发，受到了Java Swing等技术的启发，且最初基于Yahoo! User Interface Library (YUI)。ExtJS允许...
EXT的文档资料丰富，包括详细的API文档和大量的示例代码，方便开发者学习和使用。对于初学者，可以从EXT官网下载最新的稳定版本，例如EXT 2.0或EXT 1.1。下载的EXT包中，`package`目录包含所有必要的类库文件，尤其...
EXT入门 EXT是一个基于JavaScript的富客户端开发框架，主要用于构建桌面级的Web应用程序。它提供了丰富的组件库，包括数据网格、图表、表单等，使得开发者可以创建出具有高度交互性和美观界面的应用。EXT的核心是...
7. **EXT 教程.rar、EXT 中文帮助手册 .rar、ext_教程(入门到精通).rar、EXT 教程.rar**：这些都是压缩文件，包含了更详细的教程和帮助文档，可能包含视频教程、源代码示例等，需要解压后进行学习。 通过这些资源，...
### ExtJS入门学习知识点 #### 一、ExtJS概述 **ExtJS** 是一款功能强大的JavaScript框架，专门设计用于在客户端构建丰富的Web应用程序界面。它最初由开发人员 Jack Slocum 开发，受到 Java Swing 等机制的启发，...
`Ext.get('mb1').on('click', function(e){...})`这段代码则为ID为`mb1`的元素（在这个例子中是一个按钮）添加了点击事件监听器。当用户点击按钮时，会弹出一个消息框显示“你好，中国”。EXT的这种做法增强了传统...
你可以尝试在`Ext.onReady`函数中添加代码，如弹出对话框，以验证其工作原理。 EXTJS还提供了`Ext.get`方法来获取页面上的元素，通过元素ID可以方便地操作DOM。如果需要根据特定条件获取多个元素，可以利用选择器，...
**EXT开发文档（入门）** EXT是一个基于JavaScript的前端框架，主要用于构建富互联网应用程序（RIA）。它提供了丰富的组件库和强大的数据绑定机制，使得开发者能够创建功能强大的、用户体验优秀的Web应用。本文档将...
在本文中，我们将会了解到Ext4.0的相关知识点，这是一份为初学者量身打造的入门教程。ExtJS是一个基于JavaScript框架，专门用于开发富互联网应用（RIA）的工具。该框架提供了许多组件，使得开发者可以创建具有高度...
### Ext入门学习实例教程知识点详解 #### 一、Ext简介及背景 Ext 是一款基于 JavaScript 的框架，主要用于 Web 应用程序的开发。它提供了一系列丰富的用户界面组件和功能，帮助开发者快速构建高性能的 Web 应用。...
本文将围绕“EXT入门：登陆验证表单提交”这一主题，深入探讨EXTJS中实现登录表单验证的基本步骤和原理。 EXTJS允许我们通过其丰富的组件库创建美观且功能丰富的表单，包括输入框、按钮等元素。在登录场景中，我们...