ExtJS例子

最新推荐文章于 2015-09-09 18:11:37 发布
最新推荐文章于 2015-09-09 18:11:37 发布
阅读量2.7k 收藏
点赞数
文章标签： extjs header float html button stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shirui_java/article/details/3795528
版权

用ExtJS做的例子

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ExtJS</title>

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="css/examples.css" /> 

<script type="text/javascript" src="js/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

<script>

   function showDialog(){

    Ext.MessageBox.alert("hello","Hello World!!!"); 

   }

   function showForm(){

    var win=new Ext.Window({

    title:"hello",

    width:300,

    height:200,

    html:'<h1>Hello World!!!</h1>'

    }); 

win.show(); 

   }        

   Ext.onReady(function(){

    //创建一个面板

    var obj={title:"HELLO",width:300,height:200,html:'<h1>Hello World!!!</h1>'};        

   var panel=new Ext.Panel(obj);

   panel.render("hello"); 

   //new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello World!!!</h1>'});

   //创建一个选项卡    

   var tabPanel=new Ext.TabPanel({

    width:300,

    height:200,

    items:[

    {title:"面板1",height:30,html:'content1'},

    {title:"面板2",height:30,html:'content2'},

    {title:"面板3",height:30,html:'content3'} 

    ]

   });

   tabPanel.render("hello2");

   //创建一个按扭

   var b=new Ext.Button({

    text:"添加",

    pressed:true,

    heigth:30,

    handler:showDialog  //Ext.emptyFn  

   }); 

   b.render("hello3");

   //添加事件监听

   Ext.get("button1").addListener("click",showDialog); 

   // Ext.get("button1").on("click",showDialog); //addLinster方法的另外一个简写形式是on

   //  Ext.get("button2").addListener("click",showForm);  

   // Ext.get("button2").addListener("click",showForm);  

   Ext.get("button2").on("click",showForm,this,{delay:1000});   //事件延迟处理或事件处理缓存等功能 

   //事件预处理

   var win=new Ext.Window({

    title:"不能关闭的窗口",

    height:200,

    width:300

   });

   win.show(); 

   win.on("beforedestroy",function(obj){

    alert("想关闭我，这是不可能的!");

    obj.show();

    return false;

   });

   //扩展的Panel

   new Ext.Panel({

    renderTo:"hello4",

    title:"面板头部header",

    width:300,

    height:200,

    html:'<h1>面板主区域</h1>',

    tbar:[{text:'顶部工具栏topToolbar'}],

    bbar:[{text:'底部工具栏bottomToolbar'}],

    buttons:[{text:"按钮位于footer"}]

   });

   //可刷新的Panel

   new Ext.Panel({

    renderTo:"hello5",

    title:"hello",

    width:300,

    height:200,

    html:'<h1>Hello,easyjf open source!</h1>',

    tbar:[{pressed:true,text:'刷新'}]

   });  

  　//fit布局

   new Ext.Panel({

renderTo:"hello6",

title:"容器组件",

layout:"fit",

width:500,

height:120,

items:[

{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

]

});

//form布局

new Ext.Panel({

renderTo:"hello7",

title:"容器组件",

width:300,

layout:"form",

hideLabels:false,

labelAlign:"right",

height:120,

defaultType: 'textfield',

items:[

{fieldLabel:"请输入姓名",name:"name"},

{fieldLabel:"请输入地址",name:"address"},

{fieldLabel:"请输入电话",name:"tel"}

]

});

//使用FormPanel组件

new Ext.form.FormPanel({

renderTo:"hello8",

title:"容器组件",

width:300,

labelAlign:"right",

height:120,

defaultType: 'textfield',

items:[

{fieldLabel:"请输入姓名",name:"name"},

{fieldLabel:"请输入地址",name:"address"},

{fieldLabel:"请输入电话",name:"tel"}

]

});

//Accordion布局

new Ext.Panel({

renderTo:"hello9",

title:"容器组件",

width:500,

height:200,

layout:"accordion",

layoutConfig: {

animate: true

},

items:[

{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"},

{title:"子元素3",html:"这是子元素3中的内容"}

]

});

//Card布局

var cardPanel=new Ext.Panel({

renderTo:"hello10",

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(){ 

cardPanel.getLayout().setActiveItem(i++);

if(i>2)i=0;

}

//GridPanel布局

function showUrl(value){

return "<a href='http://"+value+"' target='blank'>"+value+"</a>";  

}

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({

data:data,

fields:["id","name","organization","homepage"]

});   

//表格显示数据 

//var store=new Ext.data.JsonStore({

// data:data,

// fields:["id","name","organization","homepage"]

//});

//用XML做数据源

//var store=new Ext.data.Store({

// url:"index.xml",

// reader:new Ext.data.XmlReader(

// {record:"row"},  

// ["id","name","organization","homepage"] 

// )  

//});

var sm = new Ext.grid.CheckboxSelectionModel();   

var colM=new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),//增加自动编号

             sm,//勾选框

{header:"项目名称",dataIndex:"name",sortable:true},

{header:"开发团队",dataIndex:"organization",sortable:true},

{header:"网址",dataIndex:"homepage",sortable:true,renderer:showUrl} 

]);

var grid = new Ext.grid.GridPanel({

renderTo:"hello11",

title:"中国Java开源产品及团队",

height:150,

width:600,

//columns:[

// {header:"项目名称",dataIndex:"name"},

// {header:"开发团队",dataIndex:"organization"},

// {header:"网址",dataIndex:"homepage"}

//],这里使用cm属性

cm:colM,

sm:sm,

store:store,

autoExpandColumn:4

});  

//可编辑表格

var editData=[

{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},

{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},

{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}

];

var editStore=new Ext.data.JsonStore({

data:editData,

fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]

}); 

var colM=new Ext.grid.ColumnModel([

{header:"姓名",dataIndex:"name", sortable:true,editor:new Ext.form.TextField()},

{header:"性别",dataIndex:"sex",editor:new Ext.form.ComboBox({transform:"sexList",triggerAction: 'all',lazyRender:true})},

{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},

{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}

]);

var editGrid = new Ext.grid.EditorGridPanel({

renderTo:"hello12",

title:"学生基本信息管理",

height:200,

width:600,

cm:colM,

store:editStore,

autoExpandColumn:3

}); 

//修改后事件

function afterEdit(obj){

Ext.MessageBox.alert('提示',obj.record.get('name'));   

}  

editGrid.on("afteredit",afterEdit,this);   

//Ajax取数据

var ajaxStore = new Ext.data.Store({

           proxy:new Ext.data.HttpProxy({url:"student?cmd=list"}), 

             reader:new Ext.data.JsonReader({

             root:"result",  

             fields:["id","name","sex","bornDate","email"] 

             })

         }); 

 

ajaxStore.load({params:{start:0,limit:15}});              

var ajaxColM=new Ext.grid.ColumnModel([

{header:"姓名",dataIndex:"name", sortable:true,editor:new Ext.form.TextField()},

{header:"性别",dataIndex:"sex"},  

{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},

{header:"电子邮件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}

]);

var ajaxGrid = new Ext.grid.EditorGridPanel({

renderTo:"hello13",  

title:"学生基本信息管理",

height:200,

width:600,

cm:ajaxColM,

store:ajaxStore,

autoExpandColumn:3

}); 

//目录树

var root=new Ext.tree.TreeNode({

id:"root",

text:"树的根",

href:'http://www.easyjf.com',

hreftarget:'blank'

}); 

root.appendChild(

new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'}), 

new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'}), 

new Ext.tree.TreeNode({id:"c1",text:"子节点",href:'http://www.easyjf.com',hreftarget:'blank'}) 

); 

var tree=new Ext.tree.TreePanel({ 

renderTo:"hello14",

root:root,

width:100,

height:200

});

               

   });    

</script>

</head> 

<body>

<input type="button" id="button1" value="Show Dialog Box" >

<input type="button" id="button2" value="Show Window Form" >

<div id="hello3">&nbsp;</div><br> 

<div>

<div id="hello" style="float:left">&nbsp;</div>

<div id="hello2" style="float:left">&nbsp;</div> 

<div id="hello3" style="float:left">&nbsp;</div>

<div id="hello4" style="float:left">&nbsp;</div> 

<div id="hello5" style="float:left">&nbsp;</div> 

<div id="hello6" style="float:left">&nbsp;</div>

<div id="hello7" style="float:left">&nbsp;</div>

<div id="hello8" style="float:left">&nbsp;</div>

<div id="hello9" style="float:left">&nbsp;</div>

<div id="hello10" style="float:left">&nbsp;</div>

<div id="hello11" style="float:left">&nbsp;</div>

<div id="hello12" style="float:left">&nbsp;</div>

<div id="hello13" style="float:left">&nbsp;</div>

<div id="hello14" style="float:left">&nbsp;</div> 

</div>

<select id="sexList"> 

<option>男</option> 

<option>女</option> 

</select> 

</body>

</html>

shirui_java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
extjs 例子
01-23
extjs例子
Extjs例子Extjs例子
01-21
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
ExtJs grid使用详细
nxyc_twz
12-08 255
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
Extjs小例子
hww的专栏
10-03 1792
<br />ExtJS本质上也是一个AJAX的框架，但是它和DWR有很大不同，首先，DWR是JAVA世界的产物，而ExtJS是后台无关的。也就是说，ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次，DWR只关注客户端与服务器端的交互，没有自己的界面组件，而ExtJS最让人惊叹的就是其丰富而强大的界面组件，除此以外，它自身也能轻松地异步访问后台组件。现如今，RIA（富客户端应用）已经成了不争的趋势
EXTJS 组件开发（完整例子）
hongweigg的专栏
01-15 7599
目标：EXTJS组件开发，从component基础实现一个TAB控件。 使用EXTJS版本为5.0。测试通过。 这个例子还很初级，仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。 EXT JS TEST .tabsDiv{ width:500px;height:450px; margin-top: 0px; margin-left: 0px
extjs的例子
飞鸟快快的专栏
07-14 671
//设置树的点击事件function treeClick(node,e) {     if(node.isLeaf()){        e.stopEvent();        var n = tab.getComponent(node.id);        if (!n)
EXTjs的案例（二）
UUID
04-02 1780
这个例子比较经典，常用的一些操作基本都包括在内了。 var win=null; function showPanel(){ win.show(); }; (function(){ Ext.onReady(function(){ Ext.Ajax.timeout = 900000; var devRecord = Ext.data.Re
ExtJs 例子包
01-11
Extjs3 examples 例子包，ext3.4 官方案例全集
简单的Extjs例子
10-28
这个"简单的Extjs例子"可能是一个入门级的项目，旨在帮助初学者理解ExtJS的基本概念和使用方式。下面，我们将深入探讨ExtJS环境搭建以及如何创建一个简单的实例。 **一、ExtJS环境搭建** 1. **下载ExtJS**: 首先，...
extjs简单例子
02-16
extjs简单例子，适合初学者<br>
ExtJS3.2的各种例子
09-06
我收集了各种ExtJS的例子，有3.2还有2.5，还有所有“掏钱学ExtJS”的例子，绝对物超所值。
Extjs6示例中文版
02-07
Ext Js 6 By Example 中文翻译 内容来自网上，保留网页上内容不做更改。
extjs4 项目例子
02-07
这个项目里面包含了本人从开始初学EXTJS4的全部事例：grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释，还有一个file.txt文件是本人的小小总结，还没完整。我也是一个第一次接触EXT的初学者，只希望能与大家共享、学习，许多不到的地方希望大家能体谅，用myeclipse8.6运行项目，数据库用mysql，大家给力，免费下载。
EXTJS 经典 案例
06-16
EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版
EXTJS动态树，非常完整的一个例子
luckypeng的专栏
05-27 2764
这个是我从ITeye里看到的，最近也在做这个例子，觉得那边的写的非常的不错，现在拿过来分享下，等自己的例子写好，也会拿上来分享的   EXTJS动态树的实现举例  一、描述：通过dwr实现JS与后台的交互，从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳，节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号，能使得后台与前台同步。这个序号借助了tree中n
extjs中treepanel例子
Carl——拥抱变化、拥抱自然、拥抱互联网
09-09 1340
本文导读：TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子 一、TreePanel基本配
ExtJS 学习总结 （二）-- 项目实例
isskingdom的专栏
09-08 2141
本文以项目实例来讲解使用ExtJS的MVVM架构开发的过程。本项目实例的开发环境是Tomcat+SpringMVC+Ibatis+ExtJS，其中Tomcat、SpringMVC与Ibatis的相关配置不在本文范围。在ExtJS中与后台接口交互的地方会简单阐述并给出示例代码。先上目录结构： css、imags和js等静态资源文件都要放在resources目录下面。resources/js/ex
EXTjs的案例（一）
UUID
03-20 2783
我把最近刚学的ext总结一下，方便自己以后查阅，大家有需要的也可以自己看。前面是一些基于4.0的用法，后面是工作中用到的案例基于3.0。 下面是一个登录页面的代码：（命名也不是很规范，因为当时着急出效果） (function(){ Ext.onReady(function() { var config = { fields:['province','post']
extjs 中文例子
最新发布
08-05
在这个例子中，我们首先引入了 ExtJS 的样式和 JavaScript 文件。然后，使用 `Ext.onReady` 方法在页面加载完成后执行代码。 在代码中，我们创建了一个简单的窗口并设置了标题、宽度和高度等属性。窗口中包含一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值