在ExtJs中创建一个具有两个比例的网格

Question

我是ExtJS中的新成员，我需要您的帮助来创建一个具有两个比例的网格，第一个网格的第一列（Financial，Technical ..）和第二个一个网格的第一行（J + 1，J + 2 ..），并为每列/行索引有一个下拉框，以作出评估，这样的：

show image

谁能帮助我请 ？ 非常感谢。

Answer 1

Ext.onReady(function() { 
    var renderer = function (val) { 
    var loop = ['Barney','Fred']; 
    var str = '<select name="first">'; 
    for(var i = 0; i < loop.length ; i++){ 
     if(val === loop[i]){ 
      str += '<option value="'+loop[i]+'" selected>'+loop[i]+'</option>'; 
     }else{ 
      str += '<option value="'+loop[i]+'">'+loop[i]+'</option>'; 
     } 

    } 
    str += '</select>'; 
    return str; 

    }; 
    var rt = Ext.data.Record.create([{ 
     name: 'id' 
    }, { 
     name: 'fullname' 
    }, { 
     name: 'first' 
    }]); 
    var myStore = new Ext.data.Store({ 
     // explicitly create reader 
     reader: new Ext.data.ArrayReader({ 
       idIndex: 0 // id for each record will be the first element 
      }, 
      rt // recordType 
     ) 
    }); 
    var grid = new Ext.grid.GridPanel({ 
     renderTo: Ext.getBody(), 
     store: myStore, 
     colModel: new Ext.grid.ColumnModel({ 
      defaults: { 
       width: 120, 
       sortable: true 
      }, 
      columns: [{ 
       header: '', 
       dataIndex: 'fullname' 
      }, { 
       header: '1', 
       dataIndex: 'first', 
       renderer : renderer 
      }, { 
       header: '2', 
       dataIndex: 'first', 
       renderer : renderer 
      }, { 
       header: '3', 
       dataIndex: 'first', 
       renderer : renderer 
      }, { 
       header: '4', 
       dataIndex: 'first', 
       renderer : renderer 
      }] 
     }), 
     //sm: new Ext.grid.RowSelectionModel({singleSelect:true}), 
     width: 600, 
     height: 300, 
     frame: true, 
     title: 'Framed with Row Selection and Horizontal Scrolling', 
     iconCls: 'icon-grid' 
    }); 
    var myData = [ 
     [1, 'Fred Flintstone', 'Fred'], // note that id for the record is the first element 
     [2, 'Barney Rubble', 'Barney'] 
    ]; 
    myStore.loadData(myData); 
}); 

请参考fiddle。

希望这会有所帮助。