ExtJS2.0实用简明教程_eextjs-CSDN博客

本文链接：https://blog.csdn.net/jishijun204/article/details/2482812

http://www.easyjf.com

以下是我练习sample.html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>sample.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="./js/resources/css/ext-all.css">
    <script type="text/javascript" src="./js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./js/ext-all.js"></script>
<script type="text/javascript" src="./js/demo/demo.js"></script>
<script type="text/javascript">


</script>
</head>

<body><br><br><br>
    <center><div id="hello"></div></center>
    <input id="btn" type="button" value="按钮" />
</body>
</html>

练习demo.js文件

//Ext.onReady(function(){
//
// Ext.MessageBox.alert("hello world","this is first ");
//});

//Ext.onReady(function(){
// var win = new Ext.Window({title:"标题",width:300,height:200,html:'<h1>这是一个文本内容，测试一下汉字好不好看，能不能用 </h1>'})
// win.show();
//});
//Ext.onReady(function(){
//
// var obj = {renderTo:"hello",title:"标题",width:300,height:200,html:'<h1>这是一个文本内容，测试一下汉字好不好看，能不能用 </h1>'};
// var panel = new Ext.Panel(obj);
//
//});
//Ext.onReady(function(){
// var panel = new Ext.TabPanel({width:400,height:300,items:[{title:"标题1",height:"30"},{title:"标题2",height:"30"},{title:"标题3",height:"30"}]
// });
// panel.render("hello");
//});
//Ext.onReady(function(){
// var panel = new Ext.TabPanel({width:400,height:300,items:[new Ext.Panel({title:"标题1",height:"30"}),new Ext.Panel({title:"标题2",height:"30"}),new Ext.Panel({title:"标题3",height:"30"})]
// });
// panel.render("hello");
//});
//
//Ext.onReady(function(){
var button = new Ext.Button({
  text:"添加",
  pressed:true,
  height:30,
  handler:Ext.emptyFn
});
button.render("hello");
new Ext.Viewport({
  layout:"border",
  items:[ {
   region:"north", title:"面板",
   html:"面板内容", height:100},
   { region:"center",
    xtype:"grid",
    title:"学生信息管理", store:troe, cm:colM,
    store:store,
    autoExpandColumn:3
   } ]
});
//
//});

//Ext.onReady(function a(){
// alert('some thing');
//});
window.οnlοad=function(){
document.getElementById("btnAlert").οnclick=a;
}
//Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
Ext.get("btnAlert").addListener("click",a);
// Ext.get("btnAlert").on("click",a,this,{delay:2000});
//});

//Ext.onReady(function(){
// var win = new Ext.Window({
// title:"不能关闭的窗口",
// height:200,
// width:300,
//
// listeners:{"beforedestroy":function(obj){
// alert("想关闭我那是不可能的。");
// obj.show();
// return false;
// }}
// });
// win.show();
//});
//Ext.onReady(function(){
// var win = new Ext.Window({
// title:"不能关闭的窗口",
// height:200,
// width:300
//   });
// win.on("beforedestroy",function(obj){
// alert("想关闭我那是不可能的。");
// obj.show();
// return false;
// });
//
// win.show();
//});
//Ext.onReady(function(){ new Ext.Panel({  renderTo:"hello",  title:"面板头部header",  width:300,  height:200,  html:'<h1>面板主区域</h1>',  tbar:[{text:'顶部工具栏topToolbar'}],  bbar:[{text:'底部工具栏bottomToolbar'}],  buttons:[{text:"按钮位于footer"}]  }); });
//Ext.onReady(function(){ new Ext.Panel({  renderTo:"hello",  title:"hello",  width:300,  height:200,  html:'<h1>Hello,easyjf open source!</h1>',  tbar:[{pressed:true,text:'刷新'}]     }); });
//Ext.onReady(function(){ new Ext.Panel({  renderTo:"hello",  title:"hello",  width:300,  height:200,  html:'<h1>Hello,easyjf open source!</h1>',  tools:[{   id:"save"},   {id:"help",    handler:function(){Ext.Msg.alert('help','please help me!');}   },   {id:"close"}],  tbar:[{pressed:true,text:'刷新'}]     }); });
//Ext.onReady(function(){ new Ext.Panel({  renderTo:"hello",  title:"hello",  width:300,  height:200,  html:'<h1>Hello,easyjf open source!</h1>',    tbar:[new Ext.Toolbar.TextItem('工具栏:'),   {xtype:"tbfill"},   {pressed:true,text:'添加'},   {xtype:"tbseparator"},   {pressed:true,text:'保存'}    ]     }); });

//Ext.onReady(function(){
//new Ext.Viewport({
// enableTabScroll:true,
// layout:"border",
// items:[{title:"面板",
// region:"north",
// height:50,
// html:"<h1>网站后台管理系统!</h1>"
// },
// {title:"菜单",
// region:"west",
// width:200,
// collapsible:true,
// html:"菜单栏"
// },
// {
//  xtype:"tabpanel",
//  region:"center",
//  items:[{title:"面板1"},
//  {title:"面板2"},
//  {title:"面板3"}]
//  }
//  ]
//  });
//});

//var i = 0;
//function newWin(){
//
// var win = new Ext.Window({
//  title:"标题"+i++,
//  width:300,
//  height:200,
//  maximizable:true
// });
//
// win.show();
//}
//
//Ext.onReady(function(){
// Ext.get("btn").on("click",newWin);
//});
//
//var i = 0,mygroup;
//function newWin(){
//
// var win = new Ext.Window({
//  title:"标题"+i++,
//  width:300,
//  height:200,
//  maximizable:true,
//  manager:mygroup
// });
//
// win.show();
//}
//function toBack(){
//
// mygroup.sendToBack(mygroup.getActive());
//}
//function hideALL(){
// mygroup.hideAll();
//}
//Ext.onReady(function(){
// mygroup=new Ext.WindowGroup();
// Ext.get("btn").on("click",newWin);
// Ext.get("btnToBack").on("click",toBack);
// Ext.get("btnHide").on("click",hideALL);
// });
//《ExtJS2.0实用简明教程》之窗口分组
//http/://www.easyjf.com/blog/html/20080217/1179669.html

//Ext.onReady(function(){
// Ext.get("btn").on("click",function(){
//  Ext.MessageBox.prompt("输入提示框","请输入您的愿望",function(button,text){
//   if(button=="ok")
//    Ext.MessageBox.alert("提示","您的愿望是："+text);
//   else
//    Ext.MessageBox.alert("提示","您放弃了输入");
//  });
// });
//});

//function save(button){
// if(button == "yes"){
//
//  alert("执行操作");
// }else if (button == "no"){
//
//  alert("取消操作");
// }else{
//
//  alert("点击取消");
// }
//}
//Ext.onReady(function(){
// Ext.get("btn").on("click",function(button,text){
//  Ext.Msg.show({
//   title:'保存数据',
//   msg:'您已经做了一些改变，是否保存？',
//   buttons:Ext.Msg.YESNOCANCEL,
//   fn:save,
//   icon:Ext.MessageBox.QUESTION
//  });
// });
//});