Mam grupowaną siatkę nagłówka. Definicja siatki można znaleźć na skrzypiec Oto.

Wynik wygląda tak.

enter image description here

Chcę, aby wszystkie kolumny były równe przestrzeni, w tym te w zgiełym nagłówka. Co ja robię źle?

4
liaK 13 wrzesień 2012, 11:55

3 odpowiedzi

Najlepsza odpowiedź

EXT JS obecnie nie obsługuje tego zachowania. Miałem ten sam problem. To naprawdę nie jest błąd, ponieważ kod źródłowy wyraźnie stwierdza, że nie możesz tego zrobić, ale wydaje się być jednym z największych niedociągnięć siatek (tuż obok kolumn blokujących).

Moim rozwiązaniem było zastąpienie EXT.GRID.Columnlayout # CompletElayout Metoda w 4.1.0. W tym miejscu określono szerokość pozycji dziecka (kolumnę). Co w zasadzie szukasz, jest podjęcie całkowitej szerokości do swojej siatki (dostępne za pośrednictwem podanego układu / obiektów kontekstowych) i ręcznie konwertować Flex- & GT; szerokość na wszystkich kolumnach liści. Następnie, dla każdej grupy kolumn, możesz sumować obliczone szerokości i ustawić szerokość nadrzędną. Robiąc to metodę completeLayout oznacza, że działa automatycznie podczas każdego układu, dzięki czemu nie musisz zamykać wokół oglądania zdarzeń i takich.

Z dobrym debuggerem i uczciwą ilość cierpliwości, którą możesz to rozgryźć. Chciałbym opublikować przykładowy przykład, ale moje rozwiązanie było około 100 linii i jest częścią mojego kodu pracy. Mogę jednak zwrócić uwagę na kilka zastrzeżeń:

  1. Jeśli musisz tylko wspierać 2 poziomy nagłówków, nie przejmuj się nawiązywaniem całej metody rekurencyjnej dla 3+ poziomów. Yagni.

  2. Uważaj na ukryte kolumny. Wierzę, że był błąd, w którym hidden Group Header nie ustawił ukrytej nieruchomości na kolumnach dla dzieci. Jednym z moich kolejnych problemów było to, że pokazano, że kolumna zmieniłaby wszystko w dziwacznych sposobach.

  3. Uważaj na niezachwiane grupy. Rozwiązałem to, dzięki czemu każda kolumna zostanie uszczelniona, ale jeśli będę w stanie swobodnie przesunąć kolumny, jest częścią Twoich wymagań, może być konieczne podjęcie dodatkowych kroków.

Chociaż szczerze, najlepszym rozwiązaniem byłoby złożenie tego jako żądanie funkcji na forach Sencha i zapytaj ich, dlaczego taka ważna funkcja jest nadal nieistniejąca w bibliotece EXT JS.

Edytuj: Wysłany kod źródłowy do

Eric 13 wrzesień 2012, 13:49

Jeśli chcesz użyć sub kolumn takich jak inne, na przykład masz 2 kolumny, które mają szerokość , a zgrupowane kolumny powinny zachowywać się jak kolumny z flex ( automatyczna szerokość ) Musisz napisać własną funkcję, aby wykonać zmianę rozmiaru.

To tylko dwie linie: Sencha Przykład

Opis: Musisz dodać słuchacza zdarzeń resize do siatki i wewnątrz funkcji zmień rozmiar kolumny (y)

Słuchacz siatki:

listeners: {
    resize: function(grid) {
        // you need to add and itemId for the sub columns parent
        var subCols = grid.getView().getHeaderCt().child('#sub-cols');
        // 200 = sum of the fixed width of columns
        subCols.setWidth(grid.getWidth() - 200);
    }
}

Kolumny siatki:

{
    text: 'sub columns',
    itemId: 'sub-cols',
    columns: [{
        text: 'Email',
        dataIndex: 'email',
        flex: 1
     }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
     }]
}
2
Community 20 czerwiec 2020, 09:12

Próbowałeś skonfigurować zgrupowaną kolumnę Flex 4 razy mniejszą (skomentowaną wartość 0,25), ale nie powinno być rzeczywiście 4 razy większe?

EXTJS FLEX.

-1
Jan Korenek 13 wrzesień 2012, 11:16