ExtJS3.0之与服务器交互

wlcacc

在实际的应用中，表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此，在使用表格控件的时候经常需要与服务器进行交互。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代码：
[/url]


本文来自ChinaUnix博客，如果查看原文请点：[url]http://blog.chinaunix.net/u/22371/showart_2043667.html