przyciski extjs w wyświetlaniu paska narzędziowego

Question

Hej, mam małe pytanie, ale coś, czego nie mogę się dowiedzieć.

kiedy umieścić przycisk w pasku narzędzi ExtJS, wydaje się z domyślnym wyglądem (jak żadnej opcji paska narzędzi Windows)

Jak zrobić to wyglądać przycisku w formularzu ??

Answer 1

Zobacz ten post na forum Sencha Toolbar Button Style. Ja również uznałem ten styl przycisku za tekst dość nieintuicyjny dla użytkowników. Z kilkoma liniami CSS dodanymi do głównego pliku css ExtJs, możesz zmienić ten wygląd globalnie dla swojej aplikacji.

Answer 2

Jest to dość blisko do tego: ExtJS Button Style Toolbar

Odpowiedź Szukałem został znaleziony w tej kwestii:

Dodawanie

ctCls: 'x-btn-over' 

przycisku w konfiguracji sprawia, że ​​rzeczywiście wygląda jak przycisk. To rodzaj hackowania, ponieważ jest to zasadniczo stylizacja przycisku paska narzędzi, tak aby wyglądało, jakby było podskakiwane, ale w moim przypadku uznałem, że to wystarczy.

edytuj: Nie dotknąłem ExtJS od wersji 3, więc wygląda na to, że to już nie działa.

Answer 3

Spróbuj tak:

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

Oto moje rozwiązanie (to działa na ExtJS 3.3.3):

Dla przycisk dodać dodatkową klasę, nazwałem go jako „x-paska-szaro btn ':

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

Style dla dodatkowej klasy, w osobnym pliku CSS:

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

Ponieważ obrazy przycisku Ext leżały w pliku "/ext-3.3.3/resources/images/default/button/btn.gif", zmieniłem tylko właściwość tła -position-position. Wygląda jak przycisk natywny.

Answer 5

Trzeba owinąć go w panelu, tutaj jest rozwiązanie dla ExtJS 4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}