椰子Java

var siteName = new Ext.form.Field({
           id: 'siteName1',//表单元素最好使用Id，不然在IE浏览器中表单内容将变形
           fieldLabel: '网站名称',
           listeners : {
               specialkey : function(field, e) {
                   if (e.getKey() == Ext.EventObject.ENTER) {
                       alert("终于可以回车提交了");
                       ...
                   }
               }
           }
});

格式化时间方法： format: 'Y-m-d H:i:s'

替换'Y-m-d H:i:s'中的各个字母,当然增加和减少都没有问题,留意大小写.可得到多种样式的日期格式.
  Ext.Date的格式说明
    d 01 to 31
    D Mon to Sun
    j 1 to 31
    l Sunday to Saturday
    N 1 (for Monday) through 7 (for Sunday)
    S st, nd, rd or th. Works well with j
    w 0 (for Sunday) to 6 (for Saturday)
    z 0 to 364 (365 in leap years)
    W 01 to 53
    F January to December
    m 01 to 12
    M Jan to Dec
    n 1 to 12
    t 28 to 31
    L 1 if it is a leap year, 0 otherwise.
    o Examples: 1998 or 2004
    Y Examples: 1999 or 2003
    y Examples: 99 or 03
    a am or pm
    A AM or PM
    g 1 to 12
    G 0 to 23
    h 01 to 12
    H 00 to 23
    i 00 to 59
    s 00 to 59
    u 001 to 999
    O Example: +1030
    P Example: -08:00
    T Examples: EST, MDT, PDT ...
    Z -43200 to 50400
    c 2007-04-17T15:19:21+08:00
    U 1193432466 or -2138434463

<script type="text/javascript">
Ext.onReady(function() {
  var cm = new Ext.grid.ColumnModel([{header: '编号',dataIndex: 'id'},
                                     {header: '性别',dataIndex: 'sex'},
                                     {header: '名称',dataIndex: 'name'},
                                     {header: '描述',dataIndex: 'descn'}]);
  //排序选项
  cm.defaultSortable = true;
  var data = [['9', 'male', 'name1', 'descn1'], ['2', 'male', 'name1', 'descn2'], ['3', 'male', 'name1', 'descn2']];
  var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [{name: 'id',mapping: 0},
                                          {name: 'sex',mapping: 1},
                                          {name: 'name',mapping: 2},
                                          {name: 'descn',mapping: 3}])
  });
  ds.load();
  
  var grid = new Ext.grid.GridPanel({
    ds: ds,
    cm: cm,
    anchor:'100% 60%'
  });  
  

   var p = new Ext.Panel({
       id: "detailPanel",
       title: '详细情况', //标题
       collapsible: true, //右上角上的那个收缩按钮，设为false则不显示
       anchor:'100% 40%',
       html: "请在上面网格中选择一行数据"//panel 主体中的内容，可以执行html代码
   });  
   
   // 定义详细信息的显示模板
   var bookTplMarkup = [
      '出版号: <a href="http://www.baidu.com/{ASIN}" target="_blank">{id}</a><br/>',
      '性别: {sex}<br/>',
      '名称: {name}<br/>',
      '描述: {descn}<br/>'
   ];
   var bookTpl = new Ext.Template(bookTplMarkup); //ExtJs 的模板组件    
   
   grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
       var detailPanel = Ext.getCmp('detailPanel');
       bookTpl.overwrite(detailPanel.body, r.data);
       Ext.MessageBox.alert("提示","您选择的出版号是：" + r.data.ASIN);
   });
  
   var window = new Ext.Window({
       title: 'Resize Me',
       width: 500,
       height:300,
       minWidth: 300,
       minHeight: 200,
       layout: 'anchor',
       plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
       bodyStyle:'padding:5px;',
       buttonAlign:'center',
       modal:true,//为模式窗口，后面的内容都不能操作，默认为false
       //closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口
       //constrain：true则强制此window控制在viewport，默认为false
       items:[grid,p]
   });

   window.show();
});
</script>

问题现状：用Ext的EditorGridPanel保存修改后的数据的功能，可是每次提交的时候发现总是会把前几次的数据一起提交。

解决方法：在保存完更新数据后，刷新数据源的更改列表

ds.modified = [];
ds.reload();

var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name} {value}</span>',
'</div>'
);
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
alert(dt);


运行上面的代码会弹出<div name="myid"><span class="myclass">foo bar</span></div>说明替换成功。

Ext.onReady(function() {
   var form = new Ext.form.FormPanel({
       baseCls: 'x-plain',
       labelWidth: 55,
       defaultType: 'textfield',

       items: [{
           fieldLabel: 'Send To',
           name: 'to',
           anchor:'100%'  // anchor width by percentage
       }
       //一下是 Form 快捷方式
       keys:[{
         key:Ext.EventObject.ENTER,
         fn:doSearch,
         scope:this
        }]
       
   });
   
   //快捷方式执行的方法
   function doSearch(){
      alert('开始查找。。。');
   };

   var window = new Ext.Window({
       title: 'Resize Me',
       width: 500,
       height:300,
       minWidth: 300,
       minHeight: 200,
       layout: 'fit',
       plain:true,
       bodyStyle:'padding:5px;',
       buttonAlign:'center',
       items: form
   });

   window.show();
});

当然快捷键也可以直接放在Windows里面。


1：KeyMap构造方法如下。
KeyMap( Mixed el, Object config, [String eventName] )
参数说明：
el:HTMLElement元素或id号。
config:object，可以包含如下配置信息。
{
    key: String/Array,     //可以是数字，字符，Ext.EventObject.LEFT助记符以及它们组成的数组
    shift:       Boolean,          //shift/ctrl/alt键与key同时按下
     ctrl:        Boolean,
     alt :        Boolean,
     fn  :        Function,         //回调函数
    scope:       Object          //按键事件绑定范围
}
eventName:string 可选，其值为keydown等。

2：新建立一个KeyMap：

  var el = Ext.get("idv");  
  var keympTest=new Ext.KeyMap(el,{  
    key:Ext.EventObject.ENTER,//此处写为Ext.EventObject.ENTER亦可  
    //ctrl:true,//此行代码若存在，则fn在ctrl和key同时按下的情况下触发，此处是ctrl+enter  
    //shift: true,    //同上
    //alt: (true/false),//同上    
    fn:handerMethod,  
    scope:this  
  }  
  );  
  keympTest.enable();//使当前keymap配置生效  



3：向以存在的快捷方式加入新的热键。
  keympTest.addBinding({  
    key:'\r',  
    shift:true,  
    fn:handerMethod,  
    scope:this  
    });  
    keympTest.enable();  
  });

带树形结构的表格实现。

     初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载

   象如果窗口中有用可拖动面板的话，你在拖动后如果启动了Ext.state.Manager.setProvider(new Ext.state.CookieProvider()),就算刷新后面板仍然会在你拖动后的位置。如果不启用的话是不是就会按照默认的排列方式排列

有JSON数据：
var obj = {    
   prop1: "a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/",    
   prop2: ['x','y'],    
   prop3: {    
       nestedProp1: 'abc',    
       nestedProp2: 456    
   }    
}  
如果要将其传到后台很简单：
var req = Ext.Ajax.request({    
   url: "/ws/myAction.do",    
   params: {json: Ext.encode(obj)},    
   disableCaching: false  
})  

在Action里（后台）：

String json= request.getParameter("json");
JSONObject aJSONObject= JSONObject.fromObject(json);  

其实这个事情很简单。。。。

Ext.extend方法是用来实现类的继承。
extend(Object subclass,Object superclass,[Object overrides] : Object
第一个参数：子类
第二个参数：父类
第三个参数：要覆盖的属性。
这里需要强调一下，子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）。
<script type="text/javascript">  
               function S(){  
               }  
               S.prototype.s = "s";  
               S.prototype.s1 = "s1";  
              function C(){  
                   this.c = "c";  
                   this.c1 = "c1";  
              }  
              Ext.extend(C,S,{s1:"by c overload"});  
             var c = new C();  
              alert(c.s); //s  
              alert(c.s1); //by c overload          
</script>