Как я могу использовать Ext JsonReader для возврата набора записей Master Detail? - PullRequest
Новая
       14

Как я могу использовать Ext JsonReader для возврата набора записей Master Detail?

0 голосов
/ 13 августа 2010

Допустим, у меня есть счет и пункт счета. Я хотел бы показать список счетов в сетке сверху и снизу. Я хочу показать соответствующие элементы счета для выбранного счета. У меня есть 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" }
      ]
    }
  ]
}

Поэтому, когда я выбираю счет-фактуру 1 в верхней сетке, я хочу, чтобы пункты 11 и 12 отображались в нижней сетке. И затем показать 21 и 22, когда счет 2 выбран. Мне не нужно возвращаться на сервер каждый раз, когда я переключаюсь между счетами.

И, наконец, я хотел бы иметь возможность отслеживать, какие из них имеют изменения, чтобы я мог отправлять данные обратно, чтобы сохранить их.

Как все это возможно с помощью Ext JS? Я еще не видел пример рабочего мастера с использованием Ext JS.

Ответы [ 3 ]

1 голос
/ 31 октября 2010

в этом случае вам понадобятся два считывателя, как показано ниже: 

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

1 голос
/ 13 августа 2010

Это, конечно, возможно с ExtJS, и я предлагаю ExtJS предоставить инструменты, чтобы помочь.

Однако вы можете столкнуться с проблемой, если вы пытаетесь использовать одно хранилище для хранения ваших записей JSON.Я вспоминаю чтение (я искал ссылку, но не смог ее найти), вы должны думать о магазине как о единой таблице базы данных, а не пытаться хранить информацию о родителе / ​​потомке в одном магазине.

Итак, ясмиренно предлагаю вам хранить ваши счета в одном магазине, а ваши элементы счета - во втором магазине, связывать дочерние элементы счета с родительским счетом через некоторую ссылку (идентификатор счета) и использовать эти два магазина для поддержки двух разных сеток (или любого другого виджета)- один для счетов и второй для позиций счетов.Когда пользователь нажимает на счет, ваш слушатель (обработчик событий) соответствующим образом обновляет сетку / виджет элементов счета.

Это мой подход.

0 голосов
/ 19 сентября 2010

Это, конечно, возможно, однако вы на самом деле не отображаете подобъекты, а не ожидаете, что они будут там ...

Рассмотрим этот тестовый пример (вставьте его в FireBug, и вы увидите результаты ..) 


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);

Надеюсь, это поможет. Стюарт

...