O ícone personalizado no tabpanel falha

Question

Estou tentando adicionar um ícone personalizado a um tabpanel, mas quando faço isso, ele mostra uma caixa escura com cantos arredondados.

Meu CSS se parece com o seguinte: http://pastebin.org/447682

O código no URL é base64 para algum ícone RSS aleatório que encontrei na web. Também tentei adicionar um URL relativo a uma imagem, mas sem nenhum sucesso.

Se eu alterar meu código para usar um Base64 do arquivo Ext-Touch.css ( http://pastebin.org/447685 ) Funciona tudo bem, então por que não aceitaria meu ícone 'personalizado'?

Nota: Não preciso de um ícone RSS. Eu apenas tentei isso para fins de teste.

Answer 1

MRSOUNDLESS - Eu trabalhei no mecanismo de tema em Sencha Touch. O problema é que as guias inferiores usam máscaras webkit para ícones, não imagens tradicionais de fundo. Isso nos permite preencher o forma do ícone que você passa, para que possamos alterar dinamicamente sua cor na seleção. Para obter uma imagem tradicional lá, use background-image ao invés de -webkit-mask-box-image. Base64 A codificação como você está ainda deve ficar bem.

Answer 2

Por exemplo, em seu arquivo .html

 .image{
-webkit-mask-box-image: url('/public/images/btn.png');
}

e use a imagem definida acima em seu tabpanel

iconCls: 'image',

Answer 3

Embora essa pergunta tenha sido feita em 2010, ela ainda surgiu quando eu estava procurando uma solução. Essa funcionalidade parece ter mudado no Sencha 2.0, e eu passei um tempo lutando, então aqui está o que é necessário para a compatibilidade 2.0:

CSS/folha de estilo embutida

.x-tab .x-button-icon.XXXXX,
.x-button .x-button-icon.x-icon-mask.XXXXX {
  -webkit-mask-image: url('/img/1.png');
}

Definição do painel da guia App.js

{
    title: 'Your tab title',
    iconCls: 'XXXXX'
}

Onde xxxxx é o nome do seu ícone personalizado.

Espero que ajude.