Ext js 应用系列二：Page Grid

在做page grid时也很郁闷，开始以为只用引用Ext js的page grid对象翻页等都会自动搞定，没想到，翻页操作还是要通过服务器端代码生成，Ext js只是负责传送start，limit等参数等。。。艾，高估它了。
在notes中应用page grid，我主要用了以下设计元素，表单，视图，代理和LS lib库
1、表单，用于显示page grid

< div  id ="dlg-box"  style ="visibility:hidden;position:absolute;top:0px;" >
     < div  class ="x-dlg-hd" > Select Expired Server </ div >
     < div  class ="x-dlg-bd" >
     < div  id ="page-grid"  style ="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;" ></ div >
     </ div >
</ div >

js文件如下，其中有对Ext Dialog box 的处理，因为我的Page Grid在Dialogbox中显示。

/**/ /*

 * Ext JS Library 1.0.1

 * Copyright(c) 2006-2007, Ext JS, LLC.

 * licensing@extjs.com

 * http://www.extjs.com/license

 */

function  displayDialog() ... {
    var thisform = document.forms[0];
    var key = thisform.mLineItemKey.value;
    
    //Move selected records
    function doMove(isOK)...{
        if(isOK=="yes")   
        ...{       
                 var m = grid.getSelections(); 
                 //Set the value of key
                 m[0].set('key',key);
                 var jsonData = '[' + Ext.util.JSON.encode(m[0].data);   
                 for(i=1;i<m.length;i++)
                 ...{ 
                   //Set the value of key
                   m[i].set('key',key);  
                 jsonData = jsonData + ',' + Ext.util.JSON.encode(m[i].data);                 
                 }   
                 jsonData = jsonData + ']' ;    
                 
            var con = new Ext.data.Connection();
            con.request(...{
                url: dbpath+'wxExpiredServer?openAgent&action=updatefield&rdm'+getRandom(),
                params: ...{data:jsonData},
                callback: function (opts, success, response)...{
                    if(success) ...{
                        var returnValue = getXmlNodeValue(response.responseXML,"response");
                        if(returnValue.toLowerCase()!="success")
                            alert(returnValue);
                        else...{
                            alert('Records Move Successfully!');
                            ds.reload();        
                            gds.reload();        
                        }
                    }
                }
            })     
         }   
         else  
         ...{    
             grid.getSelectionModel().clearSelections();            
        }          
    }
    
    function onMoveClick()...{
         var m = grid.getSelections();   
         if(m.length > 0)   
         ...{   
             Ext.MessageBox.confirm('Message', 'Are sure to move?' , doMove);      
         }   
         else  
         ...{   
             Ext.MessageBox.alert('Message', 'Please select your records!');   
         }   
    }
    
    //Show Dialog
    function showDialog()...{
    //Create Dialog
        var dialog = new Ext.BasicDialog("dlg-box", ...{ 
            autoTabs:true,
            width: 690,
              height: 375,
              shadow: true,
              minWidth: 300,
              minHeight: 250,
              proxyDrag: true
         });    
        dialog.addKeyListener(27, dialog.hide, dialog);
          dialog.addButton('Close', dialog.hide, dialog);
          dialog.show();
    }
                
    //Create Record
    var Row = Ext.data.Record.create([
             ...{name: 'key'},
           ...{name: 'unid'},
           ...{name: 'product'},
           ...{name: 'cpu'},
           ...{name: 'memory'},
           ...{name: 'harddisk'},
         ...{name: 'serialnum'},
         ...{name: 'acqdate'}
      ]);

    // create the Data Store
    var ds = new Ext.data.Store(...{
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy(...{url: dbpath+"wxExpiredServer?openAgent&action=displaypage&view=xmlExpiredServer&rdm="+getRandom()}),

        // create reader that reads the records
        reader: new Ext.data.XmlReader(...{
               record: 'row',
               id: 'unid',
               totalRecords: 'totalCount'
           }, Row)
    });

    // the column model has information about grid columns
    // the data store
    var cm = new Ext.grid.ColumnModel([...{
           header: "KEY",
           dataIndex: 'key',
           width: 50,
           hidden: true
        },...{
           header: "UNID",
           dataIndex: 'unid',
           width: 50,
           hidden: true
        },...{
           header: "Product",
           dataIndex: 'product',
           width: 250
        },...{
           header: "CPU",
           dataIndex: 'cpu',
           width: 100
        },...{
           header: "Memory",
           dataIndex: 'memory',
           width: 100
        },...{
           header: "Hard Disk",
           dataIndex: 'harddisk',
           width: 150
        },...{
           header: "Serial No.",
           dataIndex: 'serialnum',
           width: 150
        },...{
           header: "Acquisition Date",
           dataIndex: 'acqdate',
           width: 100
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // create the page grid
    var grid = new Ext.grid.Grid('page-grid', ...{
        ds: ds,
        cm: cm,
        loadMask: true
    });
    
    // render it
    grid.render();

    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, ...{
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Displaying records {0} - {1} of {2}',
        emptyMsg: "No records"
    });
    // add the view button
    paging.addButton(...{
        text: 'Move',
        handler:onMoveClick
    });
    // trigger the data store load
    ds.load(...{params:...{start: 0, limit: 25}});
    showDialog();
} ;

2、视图用于生成xml文件

" < row > "
+ " < key > " + @Text(mLineItemKey) + " </ key > "
+ " < unid > " + @Text(@DocumentUniqueID) + " </ unid > "
+ " < product > " + @Text(mProductName)+ " </ product > "
+ " < cpu > " + @Text(mCPU)+ " </ cpu > "
+ " < memory > " + @Text(mMemory) + " </ memory > "
+ " < harddisk > " + @Text(mHardDisk) + " </ harddisk > "
+ " < serialnum > " + @Text(mSerialNum) + " </ serialnum > "
+ " < acqdate > " + @Text(mAcqDate) + " </ acqdate > "
+ " </ row > " + @NewLine

3、代理用于处理操作

Sub Initialize() Sub Initialize
    On Error Goto errHandle
    Dim CurLocation As String
    CurLocation = "Agent.wxServerProduct"
    
    Dim session As New NotesSession
    Dim note As NotesDocument
    Dim db As NotesDatabase
    
    Set note = session.DocumentContext
    Set db = note.ParentDatabase
    
    Dim ajaxRequest As AjaxRequest
    Set ajaxRequest = New AjaxRequest(note)
    
    Dim action As String
    action = ajaxRequest.getAction()
    
    Dim jsonString As String
    Dim json As JSON
    Dim jObjs As Variant
    Dim json2Note As String
    
    Dim view As NotesView
    Dim category As String
    
    If Lcase(action) = "displaypage" Then    
        Set view = db.GetView(ajaxRequest.getView)
        If Not view Is Nothing Then
            Call ajaxRequest.getXmlPageView(view, ajaxRequest.getCategory, Cint(ajaxRequest.getStart()),_
            Cint(ajaxRequest.getLimit()))    
        End If
        
    End If
    
    If Lcase(action) = "updatefield" Then
        
        Set json = New JSON()
        jsonString = ajaxRequest.getDecodedJsonString()
        
        jObjs = json.Parse(jsonString)
        
        json2Note = ajaxRequest.updateFieldJsonToNote(note.ParentDatabase,"mLineItemKey","key",jObjs)
        If Len(json2Note) > 0 Then
            Call bbstkLogError(CurLocation, 0, 0, json2Note)
            ajaxRequest.xmlResponse("Failure:"+json2Note)
            Exit Sub
        Else
            ajaxRequest.xmlResponse("Success")
        End If        
    End If
    
    Exit Sub
    
errHandle:
    Call bbstkLogError(CurLocation, Err, Erl, Error)
    ajaxRequest.xmlResponse("Failure:"+Error)
End Sub

4、LS lib库有一个专门处理AjaxRequest的类。