EXTJS의 editgrid 관련

9604 단어 ExtJseditgrid
EXTJS에서 editgrid는 편집하기 좋은 grid 표죠.
editgrid 귀속 데이터를 초기화할 때, 그는 당신이 표시할 데이터를 설정할 수 있습니다. 몇 열을 표시해야 하는지, 열의 맨 앞에 체크박스가 있어야 하는지, 그리고 스타일을 눌러서 편집 상태로 들어갈 수 있으며, 그 열을 편집하면 이벤트를 감청해서 당신이 해야 할 작업을 할 수 있습니다.
                

  
  
  
  
  1. // EditGrid  
  2.     this.InitEditGrid = function () {  
  3.         var sm = new Ext.grid.CheckboxSelectionModel({});  
  4.  
  5.         var column = new Ext.grid.ColumnModel([  
  6.         //  { header: 'FID', dataIndex: 'FID'},  
  7.             sm,  
  8.             { header: ' ', dataIndex: 'FName', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  9.             { header: ' ', dataIndex: 'FNum', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  10.             { header: ' ', dataIndex: 'FPrice', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  11.             { header: ' ', dataIndex: 'FMount', width: 100, css: "text-align:left;", renderer: function (v) {  
  12.                 return "<font color=red> ¥</font>" + v  
  13.             }   
  14.             }  
  15.         ]);  
  16.  
  17.         tp = new Ext.data.Record.create([  
  18.             { name: "FID", type: "string", mapping: "FID" },  
  19.             { name: "FName", type: "string", mapping: "FName" },  
  20.             { name: "FNum", type: "decimal", mapping: "FNum" },  
  21.             { name: "FPrice", type: "decimal", mapping: "FPrice" },  
  22.             { name: "FMount", type: "decimal", mapping: "FMount" }  
  23.         ])  
  24.  
  25.         var reader = new Ext.data.JsonReader({}, tp);  
  26.  
  27.         gridStore = new Ext.data.Store({  
  28.             reader: reader,  
  29.             pruneModifiedRecords: true  
  30.         })  
  31.  
  32.         // store  
  33.         gridStore.loadData([]);  
  34.  
  35.         //  
  36.         gridEdit = new Ext.grid.EditorGridPanel({  
  37.             width: 800,  
  38.             height: 300,  
  39.             cm: column,  
  40.             store: gridStore,  
  41.             clicksToEdit: 1,  
  42.             columnLines: true,  
  43.             sm: sm,  
  44.             listeners:  
  45.             {  
  46.                 afterEdit: function (a) {  
  47.                     var num = 0;  
  48.                     var price = 0;  
  49.  
  50.                     if (a.field == "FNum") {  
  51.                         num = a.value;  
  52.  
  53.                         price = gridStore.getRange()[a.row].data.FPrice;  
  54.                         if (price == "" || price == undefined) {  
  55.                             gridStore.getRange()[a.row].data.FMount = "";  
  56.                         }  
  57.                         else {  
  58.                             gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);  
  59.                             gridEdit.getView().refresh();  
  60.                         }  
  61.  
  62.                     }  
  63.                     else if (a.field == "FPrice") {  
  64.                         price = a.value;  
  65.  
  66.                         num = gridStore.getRange()[a.row].data.FNum;  
  67.                         if (num == "" || num == undefined) {  
  68.                             gridStore.getRange()[a.row].data.FMount = "";  
  69.                         }  
  70.                         else {  
  71.                             gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);  
  72.                             gridEdit.getView().refresh();  
  73.                         }  
  74.                     }  
  75.  
  76.                 }  
  77.             }  
  78.  
  79.         });  
  80.         //  
  81.         gridEdit.render("editGrid");  
  82.     }  

그는 데이터베이스에 없는 데이터도 포함할 수 있다. 예를 들어 코드에 있는 FNum, FPrice, FMount는 모두 데이터베이스에 있는 것이 아니다. 그들은 로컬에서 직접 추가할 수 있고 그는 afteredit 이벤트 이후에 발생한 계산이다.

좋은 웹페이지 즐겨찾기