Ext 的代码演示

1 ， 在ext 框架中，可以利用Ext.Panel 的autoLoad 属性来加载你需要的公共画面。比如你的logo，还有你的版权声明等等。
具体的使用方式是：
首先，在jsp或者html页面上给出一个位置来放置你准备放置的冬冬。
然后在js中间声明：  

  var  Footer  =   new  Ext.Panel( ... {   
    border:false,   
    autoLoad: ...{url: 'template/Footer.html', callback: function()...{}, scope: this}   
} );   
Footer.render( ' Footer ' );  
         var  Footer  =   new  Ext.Panel( ... {
        border:false,
        autoLoad: ...{url: 'template/Footer.html', callback: function()...{}, scope: this}
    } );
    Footer.render( ' Footer ' );

autoLoad的三个参数的意思很明显，url表示需要装载的路径，callback表示在装载完毕之后干些什么，scope表示有效范围。
２， 在表单的提交过程当中，我们可以设置的地方。如下面的代码：

var  form  =   new  Ext.form.FormPanel( ... {   
        defaultType: 'textfield',   
        labelAlign: 'right',   
        title: '用户登陆',   
        labelWidth: 120,   
        frame: true,   
        width: 500,   
        autoHeight: true,   
        waitMsgTarget: true, /**//*  true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框 */  
        items: [...{   
            fieldLabel: '用户名',   
            name:"userAccount",   
            id:"userAccount",   
            allowBlank:false  
        },...{   
            fieldLabel: '密码',   
            inputType :'password',   
            id:"passwd",   
            name:"passwd"  
        }],   
        buttons: [...{   
            text: '登陆',   
            handler: function()...{   
                form.getForm().submit(...{   
                    url:'../servlet/login', /**//* 表示表单提交的时候的路径。 */  
                    waitMsg:'正在验证用户...', /**//* 表示提交过程中间的等待信息。 */  
                    success: onLoginSuccess, /**//* 服务器返回正确的信息之后我们调用的方法。 */  
                    failure: onFailure /**//* 服务器返回错误的信息之后我们调用的方法。 */  
                });   
            }   
        },...{   
            text: '取消',   
            handler: function()...{   
                win.hide();   
            }   
        }]   
    } );   
/**/ /*  在用户校验失败的时候判断是否是服务器连接失败  */   
     var  onFailure  =   function (form,action) ... {   
        if(action.failureType=="connect")...{    
/**//*  在服务器返回了错误的信息或者是没有返回的时候，我们可以根据action.failureType来判断发生错误的大概原因，  
如果值为•connect•，那么表示是连接请求失败，•server•表示服务器端检查出了提交数据的错误，•client•表示客户端的数据异常 */  
           Ext.Msg.alert('服务器异常', '服务器异常，请与管理员联系！');   
        }   
    }    
/**/ /*  用户校验成功之后的动作  */   
     var  gotoUrl  =   function () ... {   
        window.location.href="ProjectManage.jsp";   
    }    
     var  onLoginSuccess  =   function (form,action) ... {   
        win.hide();   
    } .createSequence(gotoUrl, this )   
/**/ /*  createSequence这个方法还有一个姊妹方法，createInterceptor。  
她们分别表示在某某方法之后和某某方法之前执行某一个方法。其实就是js里面的aop。保证一个函数的调用顺序 *３， 有了下面的设定，上面讲的表单的提交之后，如果有数据校验失败的信息，在页面上将表现出更好的错误提示信息。

/**/ /*  设置提示消息的显示方式  */   
    Ext.QuickTips.init();   
    Ext.form.Field.prototype.msgTarget  =   ' side ' ;

４、讲一下gridPanel这个控件在创建之后都有哪些事件可以触发，以及我们如何来设置这样的触发事件。
察看以下gridPanel的源码，我们发现有如下的这么多的事件可以触发。

//  raw events   
             /**/ /**  
             * @event click  
             * The raw click event for the entire grid.  ------简单的事件描述，相信大家都看得懂，就不解释了。  
             * @param {Ext.EventObject} e       ---------------这个是框架会自动传入的参数，下面的一样。  
             */   
             " click " ,                                // ------------- 这个是事件名称，下面的一样   
             /**/ /**  
             * @event dblclick  
             * The raw dblclick event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " dblclick " ,   
             /**/ /**  
             * @event contextmenu  
             * The raw contextmenu event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " contextmenu " ,   
             /**/ /**  
             * @event mousedown  
             * The raw mousedown event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " mousedown " ,   
             /**/ /**  
             * @event mouseup  
             * The raw mouseup event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " mouseup " ,   
             /**/ /**  
             * @event mouseover  
             * The raw mouseover event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " mouseover " ,   
             /**/ /**  
             * @event mouseout  
             * The raw mouseout event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " mouseout " ,   
             /**/ /**  
             * @event keypress  
             * The raw keypress event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " keypress " ,   
             /**/ /**  
             * @event keydown  
             * The raw keydown event for the entire grid.  
             * @param {Ext.EventObject} e  
             */   
             " keydown " ,   
  
             //  custom events   
             /**/ /**  
             * @event cellmousedown  
             * Fires before a cell is clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " cellmousedown " ,   
             /**/ /**  
             * @event rowmousedown  
             * Fires before a row is clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Ext.EventObject} e  
             */   
             " rowmousedown " ,   
             /**/ /**  
             * @event headermousedown  
             * Fires before a header is clicked  
             * @param {Grid} this  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " headermousedown " ,   
  
             /**/ /**  
             * @event cellclick  
             * Fires when a cell is clicked.  
             * The data for the cell is drawn from the {@link Ext.data.Record Record}  
             * for this row. To access the data in the listener function use the  
             * following technique:  
             * <pre>  
<code>  
    function(grid, rowIndex, columnIndex, e) {  
        var record = grid.getStore().getAt(rowIndex);  // Get the Record  
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name  
        var data = record.get(fieldName);  
    }  
</code>  
</pre>  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " cellclick " ,   
             /**/ /**  
             * @event celldblclick  
             * Fires when a cell is double clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " celldblclick " ,   
             /**/ /**  
             * @event rowclick  
             * Fires when a row is clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Ext.EventObject} e  
             */   
             " rowclick " ,   
             /**/ /**  
             * @event rowdblclick  
             * Fires when a row is double clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Ext.EventObject} e  
             */   
             " rowdblclick " ,   
             /**/ /**  
             * @event headerclick  
             * Fires when a header is clicked  
             * @param {Grid} this  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " headerclick " ,   
             /**/ /**  
             * @event headerdblclick  
             * Fires when a header cell is double clicked  
             * @param {Grid} this  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " headerdblclick " ,   
             /**/ /**  
             * @event rowcontextmenu  
             * Fires when a row is right clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Ext.EventObject} e  
             */   
             " rowcontextmenu " ,   
             /**/ /**  
             * @event cellcontextmenu  
             * Fires when a cell is right clicked  
             * @param {Grid} this  
             * @param {Number} rowIndex  
             * @param {Number} cellIndex  
             * @param {Ext.EventObject} e  
             */   
             " cellcontextmenu " ,   
             /**/ /**  
             * @event headercontextmenu  
             * Fires when a header is right clicked  
             * @param {Grid} this  
             * @param {Number} columnIndex  
             * @param {Ext.EventObject} e  
             */   
             " headercontextmenu " ,   
             /**/ /**  
             * @event bodyscroll  
             * Fires when the body element is scrolled  
             * @param {Number} scrollLeft  
             * @param {Number} scrollTop  
             */   
             " bodyscroll " ,   
             /**/ /**  
             * @event columnresize  
             * Fires when the user resizes a column  
             * @param {Number} columnIndex  
             * @param {Number} newSize  
             */   
             " columnresize " ,   
             /**/ /**  
             * @event columnmove  
             * Fires when the user moves a column  
             * @param {Number} oldIndex  
             * @param {Number} newIndex  
             */   
             " columnmove " ,   
             /**/ /**  
             * @event sortchange  
             * Fires when the grid's store sort changes  
             * @param {Grid} this  
             * @param {Object} sortInfo An object with the keys field and direction  
             */   
             " sortchange "   

然后是我们怎么样来设置这些事件。

/**/ /*  设置ｇｒｉｄ的双击事件  */   
grid.on( " rowdblclick "  ,  function (grid) ... {   
   var row = grid.getSelectionModel().getSelected();   
   alert(row.get("title"))   
} );

5，由DWRProxy来使用dwr的数据

/**/ /*  由ｄｗｒ提供的数据创建适合ｇｒｉｄ使用的数据  */   
     var  recordType  =  Ext.data.Record.create([  // 给出一个后台数据的结构   
         ... {name: "id", type: "int"} ,   
         ... {name: "title", type: "string"} ,   
         ... {name: "content", type: "string"} ,   
         ... {name: "name", mapping:"author.name", type: "string"} ,   
         ... {name: "email", mapping:"author.email", type: "string"}    
      ]);   
     var  ds  =   new  Ext.data.Store( ... {   
        proxy: new Ext.data.DWRProxy(testdwr.getItems, true),   
        reader: new Ext.data.ListRangeReader(...{id:"id",totalProperty:'totalSize'},recordType),   
        remoteSort: true  
      } );   
    ds.load( ... {params:...{start:0, limit:10}, arg:[]} );   // 用于分页的信息以及其他信息都可以在这儿设置参数。