学步园

• 初始化头部

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="../../ext2/source/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="../../ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext2/ext-all.js"></script>

• GridPanel加载远程json数据

 var labs = new Ext.data.JsonStore({
  url: 'http://127.0.0.1:8080/LabShiftPrj/bookAction!getBookLabs.action?userName=' + Ext.get("userName").getValue(),
  fields: ['index' , 'value'],
  autoLoad: true,
  root: 'labs',
  method: 'post'
  //data: {"labs":[{"index":1,"value":"LAB-CMP-1"},{"index":2,"value":"LAB-CMP-2"},{"index":3,"value":"LAB-PHY-1"}]}
 });
 
 var g = new Ext.grid.GridPanel({
  renderTo: document.body,
  frame: true,
  title: '已预定实验室',
  height: 200,
  width: 500,
  store: labs,
  columns: [
   {header: '编号' , dataIndex: 'index' , sortable: true},
   {header: '实验室' , dataIndex: 'value' , sortable: true}
    ],
  sm: new Ext.grid.RowSelectionModel({
   singleSelect: true,
   listeners: {
    rowselect: {
     fn: function(sm ,index ,record){
      Ext.Msg.alert(record.data.value);
     }
    }
   }})
 });

• FormPanel实例

var fm = new Ext.FormPanel({
  renderTo: document.body,
  frame: true,
  title: 'register',
  width: 500,
  items: [
   {
    xtype: 'textfield',
    fieldLabel: 'Name',
    name: 'name',
    vtype: 'alpha'
   },
   {
    xtype: 'timefield',
    fieldLabel: 'Date',
    name: 'd'
   },
   {
    xtype: 'radio',
    fieldLabel: 'Sex',
    name: 's',
    boxLabel: 'Male'
   },
   {
    xtype: 'radio',
    name: 's',
    boxLabel: 'Female',
    fieldLabel: '',
    labelSeperator: ''
   },
   {
    xtype: 'checkbox',
    name: 'join',
    fieldLabel: 'Join'
   },
   {
    xtype: 'combo',
    name: 'city',
    fieldLabel: 'City',
    store: cities,
    mode: 'local',
    displayField: 'value',
    width: '120'
   },
   {
    xtype: 'textarea',
    name: 'description',
    fieldLabel: 'Description',
    width: 300
   }
  ],
  buttons: [
   {
    text: 'OK',
    handler: function()
    { 
     Ext.Ajax.request({
      url: 'www.126.com',
      params: {
       name:fm.getForm().findField('name').getValue(),
       date:fm.getForm().findField('description').getValue()
      },
      success: function(response, options) {
       Ext.Msg.alert('success');
      },
      failure: function(response , options){
       Ext.Msg.alert("fail");
      }
     });
    }
   },
   {
    text: 'CANCEL',
    handler: function()
    {
     fm.getForm().reset();
    }
   }
  ]
 });

• ToolBar实例

var tb = new Ext.Toolbar({
  renderTo: document.body,
  items: [
  {xtype: 'tbbutton' , text: 'File' , menu: [
    {text:'1' , handler: function(){
         Ext.Msg.alert("1");
       }} ,
    {text: '2' , handler: function(){
         Ext.Msg.alert("2");
       }} ,
    {text: '3' , handler: function(){
         Ext.Msg.alert("3");
       }
    }]
  } ,
  {xtype: 'tbbutton' , text: 'Project' , menu: [{text:'1'} , {text: '2'} , {text: '3'}]},
  {xtype: 'tbbutton' , text: 'Configuration' , menu: [{text:'1'} , {text: '2'} , {text: '3'}]},
  {xtype: 'textfield' , name: 'search' , listeners: {specialkey: function(f,e){
   if (e.getKey() == e.ENTER)
   {
    Ext.Msg.alert(this.getValue());
   }
  }}}]
 });

• Prompt实例

 Ext.MessageBox.prompt('this is a test',
  'please input',
  function(bnt , content)
  {
   Ext.MessageBox.alert('content' , content , function(bnt){});
  }
 );

• 日期格式化

var gedt = Ext.util.Format.date(fm.getForm().findField('currentDate').getValue(), 'Y-m-d');

• DateField发生形变

var chromeDatePickerCSS = ".x-date-picker {border-color: #1b376c;background-color:#fff;position: relative;width: 185px;}";
Ext.util.CSS.createStyleSheet(chromeDatePickerCSS,'chromeDatePickerStyle');

• 中文支持

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="../ext2/source/locale/ext-lang-zh_CN.js"></script>

• Ajax 提交表单

Ext.Ajax.request({
 url: 'http://127.0.0.1:8080/LabShiftPrj/userAction.action',
 params: {
   userName:fm.getForm().findField('userName').getValue(),
   password:fm.getForm().findField('password').getValue()
  },
  success: function(response, options) {
   var respText = Ext.util.JSON.decode(response.responseText);
       
   Ext.MessageBox.alert('register' , respText.result);
   fm.getForm().findField('userName').setValue("");
   fm.getForm().findField('password').setValue("");
  },
  failure: function(response , options){
   Ext.MessageBox.alert('register' , 'create account failed.');
  }
 });

• 复选框

{
 xtype: 'checkbox',
 fieldLabel: '婚姻状态',
 name: 'marry'
}

if (fm.getForm().findField('marry').getValue() == true)
{
 Ext.Msg.alert('婚姻状况' , '已婚');
}
else
{
 Ext.Msg.alert('婚姻状况' , '未婚');
}

•  静态树

new Ext.tree.TreePanel({   
     renderTo:document.body,
     animate:true,
     title:"Extjs静态树",   
     collapsible:true,   
     rootVisible:true,
     autoScroll:true,   
     autoHeight:true,   
     split: true,   
     width:200,   
     lines:true,
    
     loader: new Ext.tree.TreeLoader({   
         preloadChildren: true,
         clearOnLoad: false  
     }),   
     root:new Ext.tree.AsyncTreeNode({   
         id:"root",   
         text:"根节点",
         expanded:true,
         leaf:false,
         children:[{      
             text:'子节点一',   
             leaf:true  
         },{
             text:'子节点二',   
             children:[{   
                 text:"111",
         leaf: true,
                 href: 'www.126.com'
             }]
         }]
    }),
     listeners: {   
             click: function(n) {   
                 Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '",id=' + n.attributes.href );   
             }   
         }   
});

• Confirm Box

Ext.MessageBox.confirm('确认', '是否真的需要删除您' + userName + '所预定的实验室' + labName , function(b){
                            if (b == 'yes')
                            {
                                Ext.Msg.alert('结果', '删除成功！');
                            }
                        });