ExtJS - Jak pokazać combobox w kolumnie siatki

Question

Mam gridpanel zawierać datę i kolumny kombi http://jsfiddle.net/YjYqX/
Ale nie chcę kliknij, aby pokazać moje combo. Chcę pokazać moje combo bez kliknięcia, a nie chować wewnątrz komórki jak

i taka sama dla data kolumny jak

myślę chage do clicksToEdit: 0 ale nie

plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ] 

Jak to zrobić, dzięki

Answer 1

Combobox lub datepicker są wstrzykiwane tylko po kliknięciu komórki, po prostu nie istnieją w siatce przed kliknięciem. Sposób zmiany wyglądu komórki polega na użyciu renderera w kolumnie. W ten sposób można dodać fałszywy triggerbox jako obraz tła lub coś w tym stylu.

W odpowiedzi na Twój komentarz, oto jak można to zrobić:

{ 
    xtype: 'gridcolumn', 
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
     metaData.tdCls = 'fake-combo'; 

     return value; 
    }, 
    text: 'MyColumn8', 
    editor: { 
     xtype: 'combobox', 
     store: ... 
    } 
} 

studiować docs dla wszystkich opcji renderujący. Istnieją różne klasy, które możesz określić i jakie atrybuty będą używane przez DomHelper. Klasa css może mieć obraz tła, ale musisz tu eksperymentować. Nie będzie łatwo uzyskać spójny układ z tym, co chcesz zrobić, ale masz pełny dostęp do elementu div, który jest renderowany do komórki. Pamiętaj, by sprawdzić wyniki za pomocą narzędzia Firebug lub Chrome Dev Tools, dzięki czemu zobaczysz dokładnie, co się stanie.

Chociaż można zrzutu ekranu combobox i ustawić go jako obraz tła. Lepiej jednak nie próbuj tworzyć combobox w rendererze, tak nie działa. Posiadanie prawdziwego combobox dla każdego wiersza jest niestandardowe i może mieć wpływ na wydajność, jeśli masz dużo wierszy.

Answer 2

Jedynym sposobem na osiągnięcie tego w 4.2x lub niższym jest użycie niestandardowego komponentu, takiego jak kolumna składnika Skirtle http://skirtlesden.com/ux/component-column Ten typ kolumny pozwala wstawiać dowolne komponenty do komórki.

W nadchodzącym wydaniu ExtJS będzie coś o nazwie Gadget Grid, która pozwoli na podobną funkcjonalność.

Answer 3

var grid = Ext.create('Ext.grid.Panel', { 
      store: store, 
      columns: 
       [ 
      { 
         header: 'Category', 
         dataIndex: 'CategoryName', 
         editor: 
          { 
           xtype: 'combobox', 
           store: 'categoryStore', 
           displayField: 'CategoryName', 
           valueField: 'CategoryID' 
          } 
        } 
       ], 
      width: 450, 
      renderTo: Ext.getElementById('hede') 
     }); 

Answer 4

Spróbuj ten link ..

http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html

To z ExtJS 5.

Aktualizacja:

{ 
    xtype: 'widgetcolumn', 
    text: 'Progress', 
    width: 120, 
    widget: { 
     xtype: 'combobox' 
    } 
} 

Ten pracował jak czar.

Answer 5

Ok, tutaj jest pełna przykładów, jak używać rozwijalne pola w Sencha ExtJS:

var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: 
      [ 
       { 
        xtype: 'gridcolumn', 
        text: 'UserStatus', 
        dataIndex: 'userstatus', 
        editor: { 
         xtype: 'combobox', 
         allowBlank: false, 
         displayField:'Name', 
         valueField:'Id', 
         queryMode:'local', 
         store: this.getStatusChoicesStore() 
        } 
       } 
      ], 
     width: 450, 
     renderTo: Ext.getElementById('hede') 
    }); 

Teraz to .getStatusChoicesStore() funkcja dostarczy nam możliwości wyboru tego pola kombi (możesz zdefiniować tę funkcję w dowolnym miejscu lub po prostu wstawić ją wewnątrz definicji kolumn, dla mnie łatwiej będzie ją odczytać, jeśli utworzę dla niej funkcję):

getStatusChoicesStore : function() { 
     return Ext.create('Ext.data.Store', { 
      data : [{Id: 0, Name:"Active"},{Id: 1, Name: "Inactive"}] 
     }); 
    }, 

Dodatkowo, więcej informacji i przykładów można znaleźć here.