Question

我有以下问题：我需要使用REST服务（第三方，而不是我的）并使用Ext.grid.Panel向用户显示结果数据。

问题是我不知道数据结构和内容（它是Geoserver的queryLayer中的JSON）所以我不能有商店/网格/模型字段定义到尊重ExtJS MVC设计。

那么在这种情况下我怎么能更灵活呢？我尝试在网格by hand中添加一行，但在阅读https://www.sencha.com/forum/showthread.php?48625-how-can-i-insert-a-row-in-GRID后，我认为这是一种犯罪行为

Answer 1

您可以为模型类中的动态字段添加转换图层。转换将为您不了解结构的数据提供字符串可读格式。

Private Sub Worksheet_SelectionChange(ByVal Target As Range)

  Dim rgSel As Range, rgCell As Range
  Dim cellsFound As Integer
  Dim filters() As String

  Set rgSel = Selection
  cellsFound = 0

  For Each rgCell In rgSel

    If rgCell.Column = 1 Then
      cellsFound = cellsFound + 1
      ReDim Preserve filters(cellsFound)
      filters(cellsFound - 1) = rgCell
    End If

  Next rgCell

  If cellsFound > 0 Then
    Sheet2.ListObjects("TblCustomers").Range.AutoFilter Field:=1, Criteria1:=filters, Operator:=xlFilterValues

   'you may need to select the customer sheet manually after you made your multiple selection,
   'otherwise you'll just jump to it avery time you change the selection
   'Sheet2.Activate

  End If

End Sub

然后，您将在网格列中显示所有非结构化数据，只需添加＆＃39; dynamic＆＃39; field as dataIndex。

Answer 2

我的解决方法：

首先，使用函数接收数据以集中所有创建内容：

function addGrid ( title, data ) {
    var storeColumns = getStoreColumnsFromJson( data[0] );   
    var gridColumns = getGridColumnsFromJson( data[0] );

    var store = createStore( data, storeColumns );
    var grid = createGrid( title, store, gridColumns );

    myContainerWindowPanel.add( grid );

}

现在，我需要获取数据样本（第一行）以获取从JSON数据到网格及其存储的列名：

function getStoreColumnsFromJson ( obj ) {
    var keys = [];
    for (var key in obj) {
        if ( obj.hasOwnProperty(key) ) {
            keys.push({name : key});
        }
    }
    return keys;    
}

function getGridColumnsFromJson ( obj ) {
    var keys = [];
    for (var key in obj) {
        if ( obj.hasOwnProperty(key) ) {
            keys.push({text: key, dataIndex: key});
        }
    }
    return keys;    
}

现在我将创建网格和商店。我不会仅仅因为没有它而使用模型。如果有人有强烈的建议来创建模型我会很感激。

function createGrid ( title, store, columnNames ) {
    var dummyGrid = Ext.create('Ext.grid.Panel', {
        border: false,
        title : title,
        store : store,
        frame: false,
        margin: "10 0 0 0", 
        flex:1,
        loadMask: true,
        columns:columnNames,
        autoHeight:true
    });
    return dummyGrid;
}

function createStore ( storeData, columns ) {
    var arrData = [];
    var theData = storeData;
    if ( !$.isArray( storeData ) ) {
        arrData.push( storeData );
        theData = arrData;
    } 

    var store =  Ext.create('Ext.data.Store',{
        fields: columns,
        autoLoad: true,
        data: theData
    });     
    return store;
}

灵活的商店/网格

2 个答案: