在Window、Panel、Viewport、Grid、Form、TreePanel这些组件中Window是用show方法显示出来,Viewport不需要指定renderTo,其他的都需要指定。
//Window
Ext.onReady(function()
{
var win = new Ext.Window(
{
500,
height:400,
title:'第一个窗体',
buttons:[{text:"确定"},{text:"取消"}]
});
win.show();
});
//Panel
Ext.onReady(function(){
var panel = new Ext.Panel({
500,
height:200,
title:"面板头部Header",
html:'<h1>面板主区域</h1>',
//autoLoad:{url:'index.html'},
tbar:[{pressed:true,text:'刷新'}],
bbar:[{text:'底部工具栏bottomtoolbar'}],
buttons:[{text:"按钮位于footer"}]
});
panel.render('test'); //渲染到id为test的div上
alert(panel.el.dom.innerHTML);
alert(panel.el.dom.outerHTML);
alert(document.body.innerHTML);
panel.body.update(
"<h1><font color='blue'>EXT 主面板</font></h1>",true,function(){}
);
panel.load({
url:'index.html',
params:{name:"daxia",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载,请稍候...",
timeout: 30,
scripts: true
});
});
//Panel中renderTo、applyTo、contentEl的区别renderTo和applyTo是把面板渲染到制定的div的节点上,contentEl是配置选项来把页面中的某一个DIV 的内容作为面板的内容
Ext.onReady(function(){
var panel = new Ext.Panel({
title:'面板',
500,
height:300,
renderTo:'c',
contentEl:'tt'
});
alert(document.body.innerHTML);
});
//ViewPort
//简单的viewport面板,不需要在制定renderTo
Ext.onReady(function(){
new Ext.Viewport({
layout:'fit',
items:[{
title:'Viewport面板',
html:'面板body',
bbar:[{text:'按钮1'},{text:'按钮2'}]
}]
});
});
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:'border',
items:[
{
title:'面板',
region:'north',
height:200,
html:'<h1>网站后台管理系统</h1>'
}
,{
title:'菜单',
region:'west',
300,
collapsible:true,
html:'菜单栏'
},
{
xtype:'tabpanel',
region:'center',
items:[{title:'面板1'},{title:'面板2'}]
}]
});
});
//对话框
function confirmDialog()
{
Ext.Msg.confirm('提示','是否要删除',function(button){
alert("选择的结构:"+(button=='yes'?'是':'否'));
});
}
function inputDialog()
{
Ext.MessageBox.prompt("输入你的名字","请输入你的名字:",function(button,text){
if(button=="ok"){
alert("输入的名字:"+text);
}
else alert("你放弃输入 !");
});
}
var t=0;
function progress()
{
t=0;
var msgbox = Ext.Msg.progress('请稍后','保存数据','请稍候,正在保存数据......');
updateProgress();
}
function updateProgress()
{
t+=0.1;
Ext.Msg.updateProgress(t);
if(t>1)
Ext.Msg.hide();
else
updateProgress.defer(1000);
}
function doSave(button,text)
{
if(button="yes")
{
progress();
}
else if(button=="no")
{
//不保存数据
}
else
{
//取消当前操作
}
}
function save()
{
Ext.Msg.show({
title:'保存数据',
msg:'是否要保存修改的数据?',
buttons:Ext.Msg.YESNOCANCEL,
fn:doSave,
icon:Ext.MessageBox.QUESTION
});
}
//TabPanel
Ext.onReady(function(){
var i=0;
var tab = new Ext.TabPanel({
renderTo:'tt',
500,
height:300,
enableTabScroll:true,
activeTab:true,
bbar:[{text:'添加',handler:function(){
tab.add({title:'新面板'+i++,closable:true,html:'this is the new '+i+' Panel!'});
}
}],
items:[{title:'面板1',html:'this is first Tabpanel!'},{closable:true,title:'面板2',html:'this is second TabPanel!'},{closable:true,title:'面板3',html:'this is third TabPanel!'}]
});
});
//Grid
Ext.onReady(function(){
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 grid = new Ext.grid.GridPanel({
renderTo:'tt',
title:'中国Java开源产品及团队',
height:150,
600,
columns:[{header:'项目名称',dataIndex:'name'},
{header:'开发团队',dataIndex:'organization'},
{header:'网址',dataIndex:'homepage'}
],
store:store,
autoExpandColumn:2
});
});
//TreePanel
Ext.onReady(function(){
var root = new Ext.tree.TreeNode({
id:'root',
text:'树的根'
});
root.appendChild(new Ext.tree.TreeNode({
id:'c1',
text:'子节点'
})
);
var tree = new Ext.tree.TreePanel({
renderTo:'test',
100,
root:root
});
});
//form
Ext.onReady(function(){
var f = new Ext.form.FormPanel({
renderTo:'test',
300,
height:200,
title:'用户信息录入',
labelWidth:60,
labelAlign:'right',
frame:true,
defaults:{xtype:'textfield',180},
items:[
{name:'username',fieldLabel:'姓名'},
{name:'password',fieldLabel:'密码',inputType:'password'},
{name:'email',fieldLabel:'电子邮件'},
{xtype:'textarea',name:'intro',fieldLabel:'简介'}
],
buttons:[{text:'提交',handler:function(){
f.form.submit({
waitTitle:'请稍候',
waitMsg:'正在提交表单数据,请稍候......'
});
}},
{text:'重置',handler:function(){
f.form.reset();
}
}]
});
});