Ext学习总结——EditPanel的实现

    Ext是一个很成熟的js框架，他的store存储结构将发送请求和接受请求封装起来，如此，我们只需要定义数据来源和数据结构，便可以通过store.load()获取数据： 

var  store  =   new  Ext.data.Store({
          // proxy:new Ext.data.ScriptTagProxy({    url:'http://localhost:17319/KBS/Grid/EditString.aspx'}),
          proxy: new  Ext.data.HttpProxy({    url: ' salesTargetList.action ' }),
         reader:  new  Ext.data.JsonReader(
          {
             totalProperty :  ' totalCount ' ,
             root :  ' root ' ,
             id :  ' storeID '
         },
         [
              {name:  ' id ' , type:  ' int ' },
              {name:  ' orderMonth ' , type:  ' int ' },     //  格式：200709
              {name:  ' storeID ' , type:  ' int ' },
              {name:  ' storeName ' },
              {name:  ' vp ' , type:  ' float ' },
              {name:  ' sales ' , type:  ' float ' },
              {name:  ' newSR ' , type:  ' int ' },
              {name:  ' newPC ' , type:  ' int ' }
         ])
     });

    proxy指定了数据来源，将请求发送至salesTargetList.action， 而reader定义了它所读取数据的格式。这里我们所碰到的第一个问题出现了——那就是如何将一张查询出来的二维表格序列化成json对象。在项目框架 中，我们得到的结果通常是一个或一组（List）doMain对象，那么如何将它们转为可以被读取的数据格式呢？
    我用的是一个插件jsonrpc，它不但解决了上面的问题，而且还提供将java类注册到js里的功能，如此，你可以在js中调用框架的业务逻辑。如此，可以让Ext更好地融合到你的项目中。好吧！这篇文章并不是介绍这个插件的。 

    salesTargetList.action在struts.xml中配置：

< action name = " salesTargetList "
     class = " com.herbalife.report.web.action.BizSalesTargetAction " >
      < result type = " json " >
          < param name = " root " > bizSalestarget </ param >
      </ result >
      < interceptor - ref name = " params "   />
      < interceptor - ref name = " servlet-config "   />
  </ action >

    后面我会在一篇博客中，专门介绍一下这个插件的功能和配置。
    那么，经过序列化，store便可以正确的读取到数据，格式如下：

{
          " totalCount " : 2 ，
      " root " :
         [
             {  " id " : 4 , " orderMonth " : 200712 , " sales " : 480.0 , " storeID " : 1 , " storeName " : " Altria Group Inc " , " vp " : 300.39 },
             { " id " : 5 , " orderMonth " : 200712 , " sales " : 112.0 , " storeID " : 2 , " storeName " : " AT&T Inc. " , " vp " : 1111.0 }
         ]      
 }

    如果没有这个插件，你可以将这种格式的字符串，写入response中。前面是存储结构的定义，下面是列模型的定义：

    var fm  =  Ext.form, Ed  =  Ext.grid.GridEditor;
    var cm  =   new  Ext.grid.ColumnModel([
          {header:  " StoreID " , dataIndex:  ' storeID ' , width:  50 ,align: ' center ' ,
              editor:  new  Ed( new  fm.TextField({
                 allowBlank:  false ,
                 disabled :  true
             }))
          },{header:  " StoreName " , dataIndex:  ' storeName ' , width:  185 ,align: ' left ' ,
              editor:  new  Ed( new  fm.TextField({
                 allowBlank:  false ,
                 disabled :  true
             }))
          },{header:  " OrderMonth " , dataIndex:  ' orderMonth ' , width:  80 ,align: ' center ' , // renderer:formatDate, 
              editor:  new  Ed( new  fm.TextField({
                 allowBlank:  false ,
                 disabled :  true       //  设置无法编辑
             }))
          },{header:  " VP " , dataIndex:  ' vp ' , width:  70 ,renderer:  ' usMoney ' ,
              editor:  new  Ed( new  fm.TextField({
                 allowBlank:  false
             }))
          },{header:  " Sales " , dataIndex:  ' sales ' , width:  70 ,renderer:  ' usMoney ' ,
              editor:  new  Ed( new  fm.TextField({
                 allowBlank:  false
             }))
         }]);
 
      //  by default columns are sortable
     cm.defaultSortable  =   true ;

    // 每一行可以添加renderer属性，在editGrid渲染时，回调函数进行一些处理，例如格式化日期，或添加样式、事件等等......

   接下来就是对editGrid的定义了：

var  grid  =   new  Ext.grid.EditorGrid( ' grid-example ' , {
         ds: store,
         cm: cm,
         enableColLock:  false ,
         renderTo: document.body
 });

    ds 数据源，cm列模型。前面'grid-example'是页面中grid的载体——一个div的id，我们将grid绘制在这个div上。你需要将上面的 内容放在Ext.onReady(function(){}，如此保证在打开页面时，就开始执行他们。完整代码附在文章最后。

    如此一个editgird便完成了。你现在要做的是，确保访问salesTargetList.action能拿到数据。如果在.net下，就更方便了， 在page_load方法中，直接将满足格式的字符串，Response.write一下，然后调用end()方法，你便可以通过url访问了，如： http://localhost:4321/KBS/Grid/JsonString.aspx。当然，如果你电脑上有vs环境，你同样可以在java 中，使用上面那个链接（保证vs的虚拟网站处于运行状态），在store定义数据源，你需要使用ScriptTagProxy，表示跨域访问：proxy:new Ext.data.ScriptTagProxy({ url:'http://localhost:17319/KBS/Grid/EditString.aspx'})

附代码：

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * TonkNet@lislie
 *
  */
function  formatPercent(value){
     return  value  +   ' % ' ;
};

function  formatDate(value){
     // return value.substring(0,4) + '年' + value.substring(4,value.length) + '月';
     var  tmp  =   '' ;
     for ( var  i = 0 ;i < value.length;i ++ )
    {
        tmp  +=  value.charAt(i);
         if (i  ==   3 )
            tmp  +=   ' / ' ;
    }

     return  tmp;
};

Ext.onReady( function (){
    Ext.QuickTips.init();

     //  shorthand alias
     var  fm  =  Ext.form, Ed  =  Ext.grid.GridEditor;

     //  the column model has information about grid columns
     //  dataIndex maps the column to the specific data field in
     //  the data store (created below)
     var  cm  =   new  Ext.grid.ColumnModel([
        {header:  " StoreID " , dataIndex:  ' storeID ' , width:  50 ,align: ' center ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false ,
                disabled :  true
            }))
        },{header:  " StoreName " , dataIndex:  ' storeName ' , width:  185 ,align: ' left ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false ,
                disabled :  true
            }))
        },{header:  " OrderMonth " , dataIndex:  ' orderMonth ' , width:  80 ,align: ' center ' , // renderer:formatDate,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false ,
                disabled :  true
            }))
        },{header:  " VP " , dataIndex:  ' vp ' , width:  70 ,renderer:  ' usMoney ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false
            }))
        },{header:  " Sales " , dataIndex:  ' sales ' , width:  70 ,renderer:  ' usMoney ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false
            }))
        },{header:  " NewSR " , dataIndex:  ' newSR ' , width:  60 ,align: ' right ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false
            }))
        },{header:  " NewPC " , dataIndex:  ' newPC ' , width:  60 ,align: ' right ' ,
            editor:  new  Ed( new  fm.TextField({
                allowBlank:  false
            }))
        }]);

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

     //  create the Data Store fro gird
     var  store  =   new  Ext.data.Store({
         // proxy:new Ext.data.ScriptTagProxy({    url:'http://localhost:17319/KBS/Grid/EditString.aspx'}),
        proxy: new  Ext.data.HttpProxy({    url: ' salesTargetList.action ' }),
        reader:  new  Ext.data.JsonReader(
        {
            totalProperty :  ' totalCount ' ,
            root :  ' root ' ,
            id :  ' storeID '
        },
        [
            {name:  ' id ' , type:  ' int ' },
            {name:  ' orderMonth ' , type:  ' int ' },     //  格式：200709
            {name:  ' storeID ' , type:  ' int ' },
            {name:  ' storeName ' },
            {name:  ' vp ' , type:  ' float ' },
            {name:  ' sales ' , type:  ' float ' },
            {name:  ' newSR ' , type:  ' int ' },
            {name:  ' newPC ' , type:  ' int ' }
        ])
    });

    store.load();

     //  create the editor grid
     var  grid  =   new  Ext.grid.EditorGrid( ' grid-example ' , {
        ds: store,
        cm: cm,
        enableColLock:  false ,
        renderTo: document.body
    });

     var  layout  =  Ext.BorderLayout.create({
        center: {
            margins:{left: 3 ,top: 3 ,right: 3 ,bottom: 3 },
            panels: [ new  Ext.GridPanel(grid)]
        }
    },  ' grid-panel ' );


     //  render it
    grid.render();


     var  gridHead  =  grid.getView().getHeaderPanel( true );
     var  monthText  =   new  Ext.form.TextField({name :  ' monthT ' ,id :  ' monthT ' });     //     月份 TextField
     var  storeList  =   new  Ext.form.ComboBox({         //   店铺 storeName
        id :  ' storeL ' ,
        name:  ' storeL ' ,
        store: store,
        valueField: ' storeID ' ,
        typeAhead:  true ,
        displayField:  ' storeName ' ,
        triggerAction:  ' all ' ,
        emptyText: ' Select a store... ' ,
        selectOnFocus: true ,
        width: 135
    });
     var  tb  =   new  Ext.Toolbar(gridHead,
    [{
        text :  ' 月份 ' ,
        handler :  function () {
            alert( ' 请按如下格式输入日期：200707 ' );
        }
    },monthText,{
        text :  ' 店铺 '
    },storeList
    ,{
        text :  ' 查询 ' ,
        handler : doSearch
    },{
        text :  ' 保存 ' ,
        handler : Save
    }
    ]);

     /*  ---------------- #region Filter -------------------  */
     /* Ext.get('storeL').on('change', SFilter, this, true);
    function SFilter(combo,a,b) {
        alert('111');
        var storeName = storeList.getValue();
        store.filter("storeName", storeName, false);
    } */
     /*  ---------------- #endregion Filter -------------------  */

     /*  ---------------- #endregion Check -------------------  */
    Ext.get( ' monthT ' ).on( ' blur ' , Check);
     function  Check() {
         var  value  =  document.getElementById( ' monthT ' ).value;
         var  i  =  IsNumber(value);
         if (i  >   - 1 ) {
            Ext.MessageBox.show({
                title: ' 提示 ' ,
                msg:  ' 月份包含非法字符:" '   +  value.charAt(i)  +   ' ",请输入数字 ' ,
                buttons: Ext.Msg.OK
            });
             return ;
        }
    }

     function  IsNumber(str) {
         var  inStr  =   " 1234567890 " ;
         for ( var  i = 0 ;i < str.length;i ++ ) {
             if (inStr.indexOf(str.charAt(i))  ==   - 1 )
                 return  i;
        }

         return   - 1 ;
    }
     /*  ---------------- #endregion Check -------------------  */

     /*  ---------------- #region Search -------------------  */
     function  doSearch() {
         var  mt  =  monthText.getValue();
         var  sn  =  storeList.getRawValue();
         var  msg  =   ' You condition is :  ' ;
         if (mt  !=   null )
            msg  +=   ' month = " '   +  mt  +   ' " , ' ;
         if (sn  !=   null )
            msg  +=   ' storeName = " '   +  sn  +   ' " ' ;

        Ext.example.msg( ' Message ' ,msg, this );

        store.load({params : {month : mt,storeName : sn}});
    }
     /*  ---------------- #region Search -------------------  */


     /*  ---------------- #region Update -------------------  */
     function  Save(){
        Ext.MessageBox.confirm( ' 提示 ' ,  ' 确实要保存修改记录? ' ,doSave);
    }

     function  doSave() {
        jsonurl    =   " /JSON-RPC " ;
        jsonrpc  =   new  JSONRpcClient(jsonurl);

         var  modi  =  grid.dataSource.getModifiedRecords();         //  获取更改数据行记录

         if (modi.length  <=   0 ) {
            Ext.MessageBox.show({
                title: ' 提示 ' ,
                msg:  ' 您没有修改任何数据 ' ,
                buttons: Ext.Msg.OK
            });
             return ;
        }

         var  result  =  [];
         for ( var  i = 0 ;i < modi.length;i ++ ) {
             var  value  =  modi[i].data.newSR;
             var  i  =  IsNumber( " 0123456789. " ,value);
             if (i  >   - 1 ) {
                Ext.MessageBox.show({
                    title: ' 提示 ' ,
                    msg:  ' NewSR中包含非法字符: '   +  value.charAt(i),
                    buttons: Ext.Msg.OK
                });
                 return ;
            }

            value  =  modi[i].data.newPC;
            i  =  IsNumber( " 0123456789. " ,value);
             if (i  >   - 1 ) {
                Ext.MessageBox.show({
                    title: ' 提示 ' ,
                    msg:  ' NewPC中包含非法字符: '   +  value.charAt(i),
                    buttons: Ext.Msg.OK
                });
                 return ;
            }

            result.push(modi[i].data);
        }
        jsonrpc.ajaxfacade.testModi(result);     //  调用java类

        Ext.MessageBox.show({
            title: ' 提示 ' ,
            msg:  ' 修改成功 ' ,
            buttons: Ext.Msg.OK
        });
    }
     /*  ---------------- #endregion Update -------------------  */
});

效果图：