EXT GridPanel XML操作

/*
由于项目里需要EXT,所以查了下资料写了个demo,希望此文对大家使用GridPanel有所帮助,EXT版本3.0,  

1. 解析XML报文 2. ajax 分页,3,checkbox, 4,右键菜单,4 增/删/改

 

 author:   清风漫步

 

XML格式如下

<?xml version=/"1.0/" encoding=/"ISO-8859-1/">

<dataset>

<results>16</results>

<row><id>1</id><name>Bill</name><occupation>Gardener</occupation></row>

<row><id>2</id><name>Bill</name><occupation>Gardener</occupation></row>

<row><id>3</id><name>Bill</name><occupation>Gardener</occupation></row>

<row><id>4</id><name>Ben</name><occupation>Horticulturalist</occupation></row>

</dataset>
*/

 

 

function createXml(str){
　　if(document.all)
　　{
　　    var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
　　    xmlDom.loadXML(str)
　　    return xmlDom
　　}
　　else
　　    return new DOMParser().parseFromString(str, "text/xml")
　　}
　　   
    function url()
    {
       $.ajax({
       type: "POST",
       dataType: "xml",
       url: "test2.aspx?id=1",
       data: "name=John&location=Boston",
       error: function(){
                alert('Error loading XML document');
            },
       success: function(domxml){
          
       datadisplay(domxml);

       }
    });

    }

Ext.onReady(function(){
    datadisplay(); //ext ajax 调用
   //url();  jquery ajax 调用
});

function datadisplay(xmldoc)
{
    // create the Data Store
    var store = new Ext.data.Store({
   
    // load using HTTP
     proxy: new Ext.data.HttpProxy({url:'test2.aspx'}),
    
    // the return will be XML, so lets set up a reader
    reader: new Ext.data.XmlReader({
          totalRecords: "results",
           record: 'row',
          id: "id"    
       }, [
          {name:'id'},
          {name: 'name', mapping: 'name' , type : 'string'},     // "mapping" property not needed if it is the same as "name"
          {name: 'occupation'}                 // This field will use "occupation" as the mapping.
       ])
    });
   
    var sm = new Ext.grid.CheckboxSelectionModel();
      
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),//自动行号
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'occupation'}
    ]);

    cm.defaultSortable = true;
   
    var grid = new Ext.grid.GridPanel({
        store: store,
//        columns: [
//            {header: "id", width: 120, dataIndex: 'id', sortable: true},
//            {header: "name", width: 180, dataIndex: 'name', sortable: true},
//            {header: "occupation", width: 115, dataIndex: 'occupation', sortable: true}
//        ],
        sm: sm,//没有时checkbox功能不起作用
        cm:cm,
        renderTo:'example-grid',
        width:540,
        height:300,
       
        buttons:[{     
            text:'新建',     
            tooltip:'新建一个Reader',     
           iconCls:'add',     
           enableToggle: true,     
            toggleHandler: addReader
            },
           {text:'编辑',
            tooltip:'编辑一个Reader',  
            iconCls:'edit',  
           enableToggle: true,  
            toggleHandler: editReader  
           },  
          {text:'删除',  
            tooltip:'删除一个Reader',  
            iconCls:'delete',  
            enableToggle: true,  
            toggleHandler: deleteReader  
             }], 
             
         bbar: new Ext.PagingToolbar({
            pageSize: 4,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 4,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
       
    });
   
//     store.getTotalCount(); totalRecords 取值
//     cm.getColumnCount(); 列数    
//     store.getCount());行数

    store.load();
   
   
    grid.addListener('cellclick', cellclick);
   
    function cellclick(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);
        Ext.MessageBox.alert('show','当前选中的数据是'+data);
    }
   
    grid.addListener('rowcontextmenu', rightClickFn);//right menu
       
    var rightClick = new Ext.menu.Menu({
        id:'rightClickCont', 
        items: [
            {
                id: 'rMenu1',
                handler: rMenu1Fn,//event
                text: 'menu1'
            },
            {
                //id: 'rMenu2',
                //handler: rMenu2Fn,
                text: 'menu2'
            }
        ]
    });
   
    function rightClickFn(grid,rowindex,e){
        e.preventDefault();
        rightClick.showAt(e.getXY());
    }
   
    function rMenu1Fn(){
       Ext.MessageBox.alert('right','rightClick');
    }

    function addReader()
    {
       //
    }
   
    function editReader()
    {
        //
    }
   
    function deleteReader()
    {
        selectValue();
    }

    function saveReader()
    {
        //
    }
   
    function selectValue()
    {
        var rows=grid.getSelectionModel().getSelections();

        if(rows.length==0)
        {
            Ext.MessageBox.alert('警告', '最少需要选择一条记录!');
        }

        var str="";
        for(var i=0;i <rows.length;i++)
            str = str + rows[i].get('id') + ',';
        
    }
   

}