Usar ícones nos ExtJS

estou a tentar adicionar ícones aos meus botões da barra de ferramentas em extJS. No meu caso, quero um ícone refrescante no meu botão.

Existe uma maneira fácile padrãode fazer isto? Não consigo encontrar nenhuma documentação decente na internet.

o meu botão da barra de ferramentas: 

{
            text: 'Reset',
            icon: 'refresh',
            tooltip: 'Reset Grid Layout'
}
Colocar o refresh aqui não faz nada. Há um espaço vazio no meu botão onde algo deveria estar. Ie. ele entende 'ícone', Ele não entende "refresh".

    Tens de colocar o caminho completo para algum subdiretório ExtJS?
  • há algum conjunto de ícones que possa usar?
Author: Oliver Watkins, 2014-06-18
Source

6 answers

  1. Você pode usar iconCls: e fornecer uma classe css que define a devida background definir, juntamente com outras informações (tamanho, cor, etc.)

  2. Você pode usar icon: e passar um caminho relativo à sua imagem.

  3. Há glyphs dos quais não sei muito, mas há alguns bons exemplos na web (por exemplo isto). Basicamente você carrega um tipo de letra de ícone e configura o código de caracteres na configuração glyph: do botão.

  4. E finalmente existem alguns ícones muito bonitos para o cabeçalho do painel, chamados: tools. O tema predefinido pode ser visto aqui . Os de Neptuno são muito melhores. Veja os exemplos do lava-loiças da cozinha. (se você encontrar seus nomes de classe você pode usá-los em qualquer lugar com algum ajuste). Estes são definidos no seu painel config.

Exemplo: 

config: {
  ...., 
  tools: [
    {type: 'refresh'},
    {type: 'save'}, 
    ...]  
},

Mais informação em a documentação oficial.

 2
Author: adaskos, 2014-06-18 12:47:02

Eu acredito em ExtJS ou Ext.NET tende a usar o conjunto de ícones de seda fam fam.

Http://www.famfamfam.com/lab/icons/silk/

Normalmente para usar ícones em coisas como botões, Defina uma classe css que aponta para a sua localização por ícones, por exemplo 

.myIcon {
    background-image: url(path of your image);
}

O seu componente Extt pode definir a propriedade relevante. Isto pode ser iconCls: '' ou algo semelhante (depende do componente).

 2
Author: dougajmcdonald, 2014-06-18 12:50:34
Fiz o que o @dougajmcdonald recomendou.

In my ext-all.CSS debaixo desta Linha: 

@import '../ext-theme-gray/ext-theme-gray-all.css';

Adicionei os meus caminhos de ícones: 

.myIcon {
    background-image: url('../ext-theme-gray/images/grid/columns.gif');
}

Não tenho a certeza se este é o melhor padrão de fazer as coisas com ícones. Pode haver uma maneira mais simples porque eu tenho que usar 'ext-theme-gray' para todos os URLs. Quando eu mudar olhar e sentir, então cada URL tem que ser atualizado. Talvez haja uma maneira de definir variáveis em CSS que tratariam disso.

 1
Author: Oliver Watkins, 2014-06-27 11:29:16

Pode usar a lista de ícones, mas apenas para o tipo Ext.painel.Tool. Veja API aqui. É usado usando a opção de configuração Tipo

Para botões normais, você precisa de indicar os caminhos para o seu ficheiro de imagem

Extractobutton também tem tipo, mas isso não é para ícones. Veja aqui.

 0
Author: Vivek Vardhan, 2014-06-18 12:35:44

Não encontrei no docs algo relacionado com a utilização predefinida dos ícones extjs para as páginas. Mas você pode definir o seu CSS de ícone personalizado usando o isoncls configuração.

{
   title: 'Foo',
   iconCls:'refreshIconCls'
}

CSS: 

.refreshIconCls{
   background-image:url(../images/refresh.png)!important;
 }
 0
Author: Dev, 2014-06-18 12:41:22 
   {
     xtype:'button',
     iconCls:'fa fa-bars',
   }
   //fa fa-bars is the link from the icon source, fa fa-bars represents bars icon, try this example in your code for show the icon

Você pode obter mais tipos de ícones de http://fontawesome.io/icons/

 0
Author: Arturo Morales Rangel, 2017-11-05 00:09:37