Ext JsonReader를 사용하여 Master Detail 레코드 세트를 반환하려면 어떻게해야합니까?

Question

인보이스 및 인보이스 항목이 있다고 가정 해 보겠습니다. 상단과 하단의 표에 송장 목록을 표시하고 해당 송장 항목을 선택한 송장에 표시하고 싶습니다. SQL 및 JSON 부분을 정상적으로 처리했습니다. 송장을 쿼리하고, 반환 된 모든 송장에 대해 송장 항목을 쿼리합니다 (2 쿼리 만). 그런 다음 항목을 인보이스와 대조합니다. 마지막으로 이것을 JSON으로 변환합니다. 이런 식으로 보일 겁니다. 나는 상단 그리드에 송장 하나를 선택하면

{ 
    "success": true, 
    "results": 2, 
    "rows": [ 
    { 
     "data": {"id": 1, "invoiceDate": "2010-01-01", "total": "101.00" }, 
     "invoiceItems": [ 
     {"id": 11, "invoiceID": 1, "item": "baseball", "subtotal": "50.00" }, 
     {"id": 12, "invoiceID": 1, "item": "bat", "subtotal": "51.00" } 
     ] 
    }, 
    { 
     "data": {"id": 2, "invoiceDate": "2010-02-02", "total": "102.00" }, 
     "invoiceItems": [ 
     {"id": 21, "invoiceID": 2, "item": "hat", "subtotal": "52.00" }, 
     {"id": 22, "invoiceID": 2, "item": "baseball", "subtotal": "50.00" } 
     ] 
    } 
    ] 
} 

그래서, 나는 botton을 그리드에 표시되는 항목 11, 12을보고 싶어요. 그리고 송장 2가 선택되면 21과 22를 보여줍니다. 인보이스를 전환 할 때마다 서버로 돌아 가지 않아도됩니다.

그리고 마침내 나는 어떤 데이터가 변경된 데이터인지 추적하여 데이터를 다시 전송할 수 있기를 바랍니다.

Ext JS를 사용하면 어떻게 가능합니까? Ext JS를 사용하여 작동하는 마스터 세부 예제를 아직 보지 못했습니다.

Answer 1

이것은 확실히 ExtJS에서 가능하며 ExtJS는 도움이되는 도구를 제안합니다.

그러나 JSON 레코드를 저장하기 위해 단일 저장소를 사용하려는 경우 문제가 발생할 수 있습니다. 나는 하나의 저장소에 부모/자식 정보를 저장하려고 시도하지 않고 저장소를 단일 데이터베이스 테이블로 생각해야한다는 것을 기억합니다 (참조를 검색했지만 찾지 못했습니다).

인보이스를 한 상점에 ​​저장하고 인보이스 항목을 두 번째 저장소에 저장하고, 인보이스 항목을 참고 번호 (인보이스 ID)를 통해 상위 인보이스에 연결하고 두 상점을 사용하여 다른 그리드 (또는 어떤 위젯이라도) - 하나는 인보이스이고 다른 하나는 인보이스 아이템입니다. 사용자가 송장을 클릭하면 리스너 (이벤트 핸들러)가 송장 항목 그리드/위젯을 적절히 업데이트합니다.

내 접근 방식입니다.

Answer 2

그러나 이것은 당신이 정말로 하위 개체를 매핑하지 않는보다는

파이어 버그로 스틱 (이 테스트 케이스를 고려하고 결과를 볼 수 ... 그들있을 것으로 기대 확실히 가능하다. .) 인스턴스 당신이 당신의 행 선택 이벤트에서이 같은 일을 할 것이라고에서

var store = new Ext.data.JsonStore({ 
    data: { 
success: true, result: [ 
{ 
test: {prop1: 1, prop2: 2} 
}] 
}, 
    root: 'result', 
    fields: ['test'] 
}); 

console.log(store.getRange()[0].data.test.prop1); // prints "1" 

...이 도움이

//assume "this" = your panel containing your Grid (at position 0) and another Grid (at position 1) 
var selectedRowRecord = this.get(0).getSelectionModel().getSelected(); 

var invoiceItemsStore = this.get(1).getStore(); 
invoiceItemsStore.removeAll(); 
invoiceItemsStore.loadData(selectedRowRecord.data.invoiceItems); 

희망. 스튜어트

경우에

Answer 3

, 당신은 아래의 코드로 두 리더가 필요합니다

var reader2 = new Ext.data.JsonReader({ 
    root: 'invoiceItems', 
    fields: [{name: 'id', type:'int'}, 
      {name: 'invoiceID', type:'int'}, 
      {name: 'item', type:'string'}, 
      {name: 'subtotal': type:'float'}] 
}); 
var reader = new Ext.data.JsonReader({ 
    idProperty: 'id', 
    totalProperty: 'results', 
    successProperty: "success", 
    root: 'rows', 
    fields: [ 
     {name: 'id', type:'int'}, 
     {name: 'invoiceDate', type:'date'}, 
     {name: 'total', type:'float'}, 
     {name: 'invoiceItems', convert: function(v, n){ return reader2.readRecords(n).records;} }//v: value, n: data; 
    ] 
}); 

var conn = new Ext.data.Connection({ 
    timeout : 120000, 
    url: 'address-path-to-get-json-data', 
    method : 'POST' 
}); 
var dproxy = new Ext.data.HttpProxy(conn); 

var gstore = new Ext.data.Store({ 
    proxy: dproxy, 
    reader: reader, 
    sortInfo:{field: 'id', direction: "DESC"} 
}); 

을 여기 코드는 그리드

var numrender = function(value, cell, rec, rowIndex, colIndex, store){ 
    if(value*1>0){ 
     return Ext.util.Format.number(value, '0,000.00'); 
    }else return '-'; 
} 
var invoicedetail = function(value, cell, rec, rowIndex, colIndex, store) { 
    var html = '<div class="itemdetail">{0} - {1} - {2} - {3}</div>'; 
    var re = ''; 
    Ext.each(value,function(item,index){ 
     re += String.format(html,item.get('id'),item.get('invoiceID'),item.get('item'),item.get('subtotal')); 
    }); 
    return re; 
} 
var cm = [ 
    new Ext.grid.RowNumberer({header:"No.", width: 30}), 
    {header: "ID", align: 'left',sortable:true, width: 40, dataIndex: 'id'}, 
    {header: "Invoice Date", align: 'left',sortable:true, width: 40, dataIndex: 'invoiceDate'}, 
    {header: "Total", align: 'right', width: 30, dataIndex: 'total', renderer: numrender}, 
    {header: "Invoice Items", align: 'left',sortable:false, id:'col_detail', width: 100, dataIndex: 'invoiceItems', renderer: invoicedetail} 
]; 

var grid = new Ext.grid.GridPanel({ 
    id:'invoices', 
    store: gstore, 
    columns: cm, 
    enableHdMenu: false, 
    loadMask: {msg:'Loading Invoices ...'}, 
    enableColumnResize:false, 
    stripeRows: true, 
    viewConfig: { autoFill: true }, 
    columnLines : true, 
    autoExpandColumn: 'col_detail', 
    renderTo:'grid-wrapper' 
}); 
gstore.load(); 

을 렌더링 할 필요하거나보고에 관심이있을 수 있습니다 이 나무 그루브 :

http://www.max-bazhenov.com/dev/ux.maximgb.tg/index.php