ExtJS3.0之与服务器交互

 在实际的应用中，表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此，在使用表格控件的时候经常需要与服务器进行交互。ExtJS使用Ajax方式提供了一套与服务器交互的机制，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。
    比如前面在表格中显示xml文档中数据的例子中，就是一个非常简单的从服务器端读取数据的例子，再回顾一下代码：

     var store=new Ext.data.Store({
        url:"firstXML.xml", 
        reader:new Ext.data.XmlReader({
            record:"row"},
            ["id","name","organization","homepage"])
    }); 
 

    因为Sote组件接受一个参数url，如果设置url，则ExtJS会创建一个与服务器交互的Ext.data.HttpProxy对象，该对象通过指定的Connection或Ext.Ajax.request来向服务端发送请求，从而可以读取到服务器端的数据。
    经验表明，服务器端产生JSon数据是一种非常不错的选择，也就是说假如服务器的url“/LunjunsunService.asmx/GetData”WebService产生下面的JSON数据输出。

 {
    results:[{ id:'888', name: '小李',organization: ' sun',homepage: 'blog.sina.com.cn/lunjunsun'} ]
}

    则前面显示学习信息编辑表格的store可以创建成下面的形式：

     var store=new Ext.data.Store({
        url:"firstXML.xml", 
        reader:new Ext.data.XmlReader({
            record:"row"},
            ["id","name","organization","homepage"])
    }); 
 

    其中root表示包含记录集数据的属性。
    如果在运行程序中需要给服务器端发送数据的时候，此时可以直接使用ExtJS中提供的Ext.Ajax对象的request方法。比如下面的代码实现放服务器的/ExtJSTest/LunjunsunService.asmx/UpdateData这个url发起一个请求(这里我采用了WebService)，并在params中指定发送的Student对象：

 Ext.onReady(function(){ 
    var store=new Ext.data.Store({
        url:"firstXML.xml", 
        reader:new Ext.data.XmlReader({
            record:"row"},
            ["id","name","organization","homepage"])
    }); 
    var colM=new Ext.grid.ColumnModel([
            {
                header:"项目名称",
                dataIndex:"name",
                sortable:true,
                editor:new Ext.form.TextField()
            },
            {
                header:"开发团队",
                dataIndex:"organization",
                sortable:true,
                editor:new Ext.form.TextField()
            },
            {
                header:"网址",
                dataIndex:"homepage",
               // renderer:showUrl
            }
        ]);
    var grid = new Ext.grid.EditorGridPanel({
            renderTo:"hello",
            title:"中国Java开源产品及团队",
            loadMask:"正在加载......",
            height:200,
            width:600, 
            cm:colM,
            store:store,
            autoExpandColumn:2,
            clicksToEdit:1
        });
    store.load(); 
    Ext.Ajax.request({
       async:false,
       url: 'first.jsp',
       success: sFn,
       failure: fFn,
       params: { id:'888', name: '小李',organization: ' sun',homepage: 'blog.sina.com.cn/lunjunsun'}
    });
});
 
function sFn()
{
    alert('保存成功');
}
function fFn()
{
    alert('保存失败');
}
 

WebService代码：

<%
 //out.print("failure");
 String id=request.getParameter("id");
 System.out.println("EEEEEEEEEEEEEEEEEEEEEEE:"+id);
%>