extjs

Ext.onReady(function (){
// 大括号  {}代表 空间 中括号[] 代码里面还有一个到多个对象
// Ext.Msg.alert("alert");
/*
var panel = new Ext.Panel(

{
  id:'panel_hello',
  title:'hellotitle',
  width:200,
  height:200
 
}

)
panel.render("hello");*/
/*var viewport =new Ext.Viewport({

id:'',
layout:'border',
items:[{region:'north',height:50},{region:'west',width:200},{region:'center'}]

})*/
/*var window =new Ext.Window({title:'hello World',width:300,height:200,html:'<h1>hello</h1>'});
window.show();*/
//viewport经典用法
/* new Ext.Viewport({
   enableTabScroll:true,
   layout:"fit",
   items:[{title:"面板",html:"",bbar:[{text:"按钮1"},{text:"按钮"}]}]
});*/
//完美的后台
/* 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"}]}
        ]
});*/
/* var panel =new Ext.TabPanel({width:400,height:300,items:[new Ext.Panel({title:"tab1",height:30}),new Ext.Panel({title:"tab2",height:30}),new Ext.Panel({title:"tab3",height:30})]});
panel.render("hello");*/
//tab 导航
/* var panel2 = new Ext.TabPanel({width:300,height:200,items:[{title:"tab4",height:30},{title:"tab5",height:30},{title:"tab6",height:30}]});
panel2.render("hello2");*/
//动态事件添加
/* Ext.get("btnAlert").addListener("click",a);
Ext.get("btnAlert").addListener("click",a);*/
//延迟2秒弹出
/*  Ext.get("btnAlert").on("click",a,this,{delay:2000});  */
   
/*    var win = new Ext.Window({
        title:"我是出来打酱油的！",
        width:300,
        height:200,
        html:'<h1>main</h1>',
        tbar:[{pressed:true,text:'top toolbar'}],
        bbar:[{text:'botton toolbar'}],
        buttons:[{text:'footer'}]
    });
    win.show();
    win.on("beforedestroy",function(obj){
    obj.show();
         Ext.Msg.alert("关闭?","想关闭我?你谁啊!");
       
         return false;
   
    })*/
    //强大的 面板功能
  /* new Ext.Panel({
    renderTo:"hello",
    title:"hello",
    width:300,
    height:200,
    html:'<h1>hello,easy open source</h1>',
    tools:[
         {id:"save"},
         {id:"help",handler:function(){Ext.Msg.alert('ww','ww')}},
         {id:"close"},
      ],
    tbar: [
             new Ext.Toolbar.TextItem('工具栏'),
            {xtype:"tbfill"},
            {pressed:true,text:"添加"},
            {xtype:"tbseparator"},
            {pressed:true,text:"保存"}
          ]
   });*/
/*   new Ext.Panel({
  
   renderTo:"hello",
   title:"tite",
   layout:"column",
   width:500,
   height:100,
   items:
   [
     {title:"columns1",width:100},
    {title:"columns2",width:100},
    {title:"columns3",width:100},
    {title:"columns4"}
   ]
  
   });*/
   //columns布局
   /*new Ext.Panel({
  
   renderTo:"hello",
   title:"tite",
   layout:"column",
   width:500,
   height:100,
   items:
   [
     {title:"columns1",columnWidth:.2},
    {title:"columns2",columnWidth:.3},
    {title:"columns3",columnWidth:.3},
    {title:"columns4",columnWidth:.2}
   ]
  
   });*/
   //fit布局
   /*new Ext.Panel({
     renderTo:"hello",
     title:"title",
    // layout:"fit",
     width:500,
     height:500,
     items:
     [
       {title:"model1",html:"model content1"},
       {title:"model2",html:"model content2"},
       {title:"model3",html:"model content3"}
     ]
   });*/
   //form布局
  /* new Ext.Panel({
       renderTo:"hello",
       title:"form布局",
       layout:"form",
       width:300,
       height:200,
       defaultType:"textfield",
       labelAlign:"right",
       hideLabel:"false",
       items:
       [
         {fieldLabel:"姓名",name:"name"},
         {fieldLabel:"地址",name:"address"},
         {fieldLabel:"电话",name:"tel"},
         {fieldLabel:"其他",name:"other"}
       ]
   });*/
   //form panel
/*   new Ext.FormPanel({
     renderTo:"hello",
     title:"form panel",
     width: 240,
     height: 150,
     labelAlign:"right",
     defaultType:"textfield",
     items:
     [
        {fieldLabel:"姓名",name:"name"},
        {fieldLabel:"地址",name:"address"},
        {fieldLabel:"电话",name:"tel"},
        {fieldLabel:"备注",name:"other"}
     ]
   });*/
   //accordion 布局
   //非常不错 非常完美的accordion布局
  /* new Ext.Panel({
      renderTo:"hello",
      title:"accordion布局",
      width:300,
      height:400,
      layout:"accordion",
      layoutConfig:{ animate:true },
      items:
      [
      {title:"panel1",html:"content1"},
      {title:"panel2",html:"content2"},
      {title:"panel3",html:"content3"}
      ]
  
   });*/
/*   new Ext.Panel({
   renderTo:"hello",
    title:"table row布局",
    width:500,
    height:400,
    layout:"table",
    layoutConfig:{columns:3},
    items:
    [
      {title:"panel1",html:"content1",rowspan:2,height:100},
      {title:"panel2",html:"content2",colspan:2},
      {title:"panel3",html:"content3"},
      {title:"panel4",html:"content4"}
    ]
   });
   */
   //第一步创建数据
/*  var data=
   [
      [1,'EasyJWeb','大EasyJF','www.easyjs.com'],
      [2,'jfox','小huihoo','www,huihoo.org'],
      [3,'jdon','多jdon','www.jdon.com'],
      [4,'line163','少line163','www.line163.com']
   ];*/
   //第二部  创建数据存储器
   /*var store = new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});*/
  //第三部 使用grid显示数据
/*   var grid = new Ext.grid.GridPanel({
      renderTo:"hello",
      title:"kai yuan net",
      height:150,
      widht:600,
      columns:
      [
        {header:"项目名称",dataIndex:"name"},
        {header:"开发团队",dataIndex:"organization"},
        {header:"网址",dataIndex:"homepage"},
      ],
      store:store,
      autoExpandColumn:2
   })*/
  /* var colM = new Ext.grid.ColumnModel([
      {header:"项目名称",dataIndex:"name",sortable:true},
      {header:"开发团队",dataIndex:"organization",sortable:true},
      {header:"网址",dataIndex:"homepage",renderer:showUrl,sortable:true}
   ]);
   var grid = new Ext.grid.GridPanel({
      renderTo:"hello",
      title:"中国java开源",
      height:200,
      width:600,
      cm:colM,
      store:store,
      autoExpandColumn:2
   });*/
   var data=
   [
     {id:1,name:'小王',email:'[e-mail]',sex:'男',bornDate:'1923-33-22'},
     {id:2,name:'小李',email:'[e-mail]',sex:'男',bornDate:'1233-3-2'},
     {id:3,name:'小赵',email:'[e-mail]',sex:'男',bornDate:'1532-43-22'},
     {id:4,name:'小鱼',email:'[e-mail]',sex:'男',bornDate:'2409-3-33'}
   ];
   var store = new Ext.data.JsonStore({
      data:data,
      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"
      },
      {
         header:"出生日期",
         dataIndex:"bornDate",
         width:120,
         renderer:Ext.util.Format.dateRenderer('Y年m月d日')
      },
      {
         header:"电子邮件",
         dataIndex:"email",
         sortable:true,
         editor:new Ext.form.TextField()
      }
   ]);
   var grid = new Ext.grid.EditorGridPanel({
       renderTo:"hello",
       title:"学生基本信息管理",
       height:200,
       width:600,
       cm:colM,
       store:store,
       sutoExpandColumn:3
   });
});
function showUrl(value)
{
   return '<h1><font color="red">'+value+'</font></h1>';
}
function showUrls(value)
{
   return ""+value+"";
}