extjs入门案例大全
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
])。
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
]。
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
})。
ds.load()。
var grid = new Ext.grid.GridPanel({
ds:ds,
cm:cm,
width:300,
height:400,
renderTo:'grids',
tbar:[
{
xtype:'datefield'
}
]
})。
grid.render()。
})。
Ext.onReady(function(){
new Ext.Panel({renderTo:"hello",title:"第一个
",width:300,height:300,html:'
Hello World
'})。})。
TabControl
Ext.onReady(function(){
new Ext.TabPanel({renderTo:"hello",width:300,height:200,items:[new Ext.Panel({title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]})。
})。
总结:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板",
html:'面板内容',
height:100,
width:200
})。
})。
创建按钮事件:
new Ext.Button({
renderTo:"hello",
text:"添加",
pressed:true,
height:30,
handler:Ext.emptyFn
})。
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板内容",
height:300,
width:500
},
{region:"center",
xtype:"grid",
title:"学生信息管理",
autoExpandColumn:3
}
]
})。
function a(){
alert('some thing')。
}
window.onload=function(){
document.getElementById("btnAlert").onclick = a。
}
function a(){
alert('some thing')。
}
Ext.onReady(function(){
Ext.get('btnAlert').on("click",a,this,{delay:20000})。})。
//用extjs增加事件监听器
var win = new Ext.Window({
title:"不能关闭的窗口",
height:200,width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我，这是不可能的!")。
obj.show()。
returnfalse。
}}
})。
win.show()。
//面板工具栏中放按钮
new Ext.Panel(
{
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'
面板主区域
',tbar:[{pressed:true,text:'刷新'},
],
bbar:[{text:'底部工具栏bottomToolBar'}],
buttons:[{text:"按钮位于footer"}]
}
)。
面板按钮点击事件加载
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'
Hello,easyjf open source!
',tools:[{
id:"save"},
{id:"help",handler:function(){Ext.Msg.alert('help','please help me!')。}
},
{id:"close",handler:function(){Ext.Msg.alert('close','please close me!')。}}],