ExtJS 4.1 иконки

346 views
Skip to first unread message

Maksim

unread,
Dec 4, 2012, 3:06:27 AM12/4/12
to devcl...@googlegroups.com
 Всем привет.
 У меня такой вопрос, к знатокам ExtJS. Знает кто как можно использовать стандартные иконки библиотеки  не описывая, каждую иконку в своем css? Все что в гугле попадается подразумевает именно описание каждой иконки с указанием пути. Я имею виду стандартные виджеты и с стандартные иконки на них.

Ilja Livenson

unread,
Dec 4, 2012, 3:24:26 AM12/4/12
to devcl...@googlegroups.com
Что значит использовать?

В дефолтовой theme есть сцсс'ка, через которую иконки грузятся:
ext-4.1/resources/themes/stylesheets/neptune/default/mixins/_theme-background-image.scss
- не помогает?

Илья


2012/12/4 Maksim <maksim...@gmail.com>:

Maksim

unread,
Dec 5, 2012, 3:10:23 AM12/5/12
to devcl...@googlegroups.com
Дефолтовая тема эта та что ext-standard-debug.css? Не помогает. Т.е. всякие радиобатоны есть, а вот изображений на кнопках нет. ошибок загрузки иконок тоже нет.
Neptune не дефолтный ведь, другая тема и там тоже не отображаются иконоки.

Ilja Livenson

unread,
Dec 5, 2012, 3:43:07 AM12/5/12
to devcl...@googlegroups.com
В stylesheets/extj4 есть такой же миксин. Ты хочешь отследить, почему
картинки не грузятся? или что?

2012/12/5 Maksim <maksim...@gmail.com>:

Stanislav

unread,
Dec 5, 2012, 9:13:36 AM12/5/12
to devcl...@googlegroups.com
я не спец по extjs, но глянув в соурс 
вижу что нету иконок для button элемента.

но есть какие-то иконки для <a href="" class="button">

Возможно в этом проблема?

Stanislav

unread,
Dec 5, 2012, 9:21:12 AM12/5/12
to devcl...@googlegroups.com
Не в тот css я полез :)

Но предлогаю автору показать проблемный кусок html, чтобы разговор был более предметным. А то гадаем на кофейной гуще  :))

2012/12/5 Stanislav <lunat...@gmail.com>

Maksim

unread,
Dec 10, 2012, 2:46:00 AM12/10/12
to devcl...@googlegroups.com
 Верно. И стоит описать подробнее о чем я.  Кнопки в атаче. Код js >
        dockedItems:[
            {
                xtype:'toolbar',
                items:[
                    {
                        text:'Add',
                        iconCls:'icon-add',
                        handler:function () {
                            windowFormHandler();
                        }
                    },
                    '-',
                    {
                        itemId:'delete',
                        text:'Delete',
                        iconCls:'icon-delete',
                        disabled:true,                      
                        }
                    }
                ]
            }
        ]

 Ничего такого в index файле
    <!--ExtJS lib section-->
    <!--CSS-->
    <link rel="stylesheet" type="text/css" href="/js/extjs/resources/css/ext-all-debug.css">
    <!-- Grid CheckBox extension CSS -->
    <link rel="stylesheet" type="text/css" href="/js/extjs/ux/css/CheckHeader.css"/>

    <!--JavaScript-->
    <script type="text/javascript" src="/js/extjs/ext-all-debug.js"></script>
    <!-- ExtJS lib section end-->


Все стандартно. Ошибок загрузки чего либо в браузере нет. Похоже на то что я что то забыл еще указать.
extjs_example_icons.png
extjs_my_buttons.png

Jevgeni Goloborodko

unread,
Dec 10, 2012, 3:15:38 AM12/10/12
to devcl...@googlegroups.com, Maksim
Firebug творит чудеса - выбираешь элемент и он тебе показывает какие
стили к нему откуда пришли.

On Mon 10 Dec 2012 09:46:00 AM EET, Maksim wrote:
> Верно. И стоит описать подробнее о чем я. Кнопки в атаче. Код js >
> dockedItems:[
> {
> xtype:'toolbar',
> items:[
> {
> text:'Add',
> *iconCls:'icon-add',*
> handler:function () {
> windowFormHandler();
> }
> },
> '-',
> {
> itemId:'delete',
> text:'Delete',
> *iconCls:'icon-delete',*
> disabled:true,
> }
> }
> ]
> }
> ]
> Ничего такого в index файле
> <!--ExtJS lib section-->
> <!--CSS-->
> <link rel="stylesheet" type="text/css"
> href="/js/extjs/resources/css/ext-all-debug.css">
> <!-- Grid CheckBox extension CSS -->
> <link rel="stylesheet" type="text/css"
> href="/js/extjs/ux/css/CheckHeader.css"/>
>
> <!--JavaScript-->
> <script type="text/javascript"
> src="/js/extjs/ext-all-debug.js"></script>
> <!-- ExtJS lib section end-->
>
> Все стандартно. Ошибок загрузки чего либо в браузере нет. Похоже на то
> что я что то забыл еще указать.
> On Wednesday, December 5, 2012 4:21:12 PM UTC+2, Stanislav wrote:
>
> Не в тот css я полез :)
>
> Но предлогаю автору показать проблемный кусок html, чтобы разговор
> был более предметным. А то гадаем на кофейной гуще :))
>
> 2012/12/5 Stanislav <lunat...@gmail.com <javascript:>>
>
> я не спец по extjs, но глянув в соурс
> http://code.google.com/p/extjs-public/source/browse/extjs-4.x/release/docs/resources/css/app.css
> <http://code.google.com/p/extjs-public/source/browse/extjs-4.x/release/docs/resources/css/app.css>
> вижу что нету иконок для button элемента.
>
> но есть какие-то иконки для <a href="" class="button">
>
> Возможно в этом проблема?
>
>
> On Wednesday, December 5, 2012 3:10:23 PM UTC+7, Maksim wrote:
>
> Дефолтовая тема эта та что ext-standard-debug.css? Не
> помогает. Т.е. всякие радиобатоны есть, а вот изображений
> на кнопках нет. ошибок загрузки иконок тоже нет.
> Neptune не дефолтный ведь, другая тема и там тоже не
> отображаются иконоки.
>
> On Tuesday, December 4, 2012 10:24:26 AM UTC+2, Ilja
> Livenson wrote:
>
> Что значит использовать?
>
> В дефолтовой theme есть сцсс'ка, через которую иконки
> грузятся:
> ext-4.1/resources/themes/__stylesheets/neptune/default/__mixins/_theme-background-__image.scss

Ilja Livenson

unread,
Dec 10, 2012, 3:19:56 AM12/10/12
to devcl...@googlegroups.com
Посмотри в ext-4.1/resources/themes/stylesheets/ext4/default/widgets/_buttons.scss
.

Если хочешь изменить иконки, то это делается через themeing - просто
переписываешь некоторые scss переменные и компилируешь css заново.
Нюанс из опыта: Extjs кривоват местами и нужно было пачить scss theme
напрямую (а не как в туториале).

Илья

2012/12/10 Maksim <maksim...@gmail.com>:

Maksim Muruev

unread,
Dec 10, 2012, 8:02:40 AM12/10/12
to Jevgeni Goloborodko, devcl...@googlegroups.com
Вроде бы все так. <em id="button-1021-btnWrap">
<button id="button-1021-btnEl" class="x-btn-center" autocomplete="off"
role="button" hidefocus="true" type="button" style="height: 16px;">
<span id="button-1021-btnInnerEl" class="x-btn-inner" style="">Add</span>
<span id="button-1021-btnIconEl" class="x-btn-icon icon-add"></span>
</button>
</em>
Разница только в цифровом значении id, что нормально (сравнивал в meld
на всякий случай). Стили все тоже берутся с ext-all.css ничего такого.
Единственное firebug не хочет выделять отдельно эти иконки на кнопках.

10.12.2012 10:15, Jevgeni Goloborodko пишет:
Reply all
Reply to author
Forward
0 new messages