ext示例

shirui_java

浏览: 10699 次
性别:
来自: 郑州

最近访客更多访客>>

xqwan3377

加勒比帆船

JavaOrNot

lmyks0425

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

EXT HTML Ajax 项目管理 XML

<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"> </div><br>
<div>
<div id="hello" style="float:left"> </div>
<div id="hello2" style="float:left"> </div>
<div id="hello3" style="float:left"> </div>
<div id="hello4" style="float:left"> </div>
<div id="hello5" style="float:left"> </div>
<div id="hello6" style="float:left"> </div>
<div id="hello7" style="float:left"> </div>
<div id="hello8" style="float:left"> </div>
<div id="hello9" style="float:left"> </div>
<div id="hello10" style="float:left"> </div>
<div id="hello11" style="float:left"> </div>
<div id="hello12" style="float:left"> </div>
<div id="hello13" style="float:left"> </div>
<div id="hello14" style="float:left"> </div>
</div>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>

</body>
</html>

分享到：