أيقونة مخصصة في Tabpanel يفشل

Question

أحاول إضافة أيقونة مخصصة إلى tabpanel ، لكن عندما أفعل ذلك ، يظهر فقط صندوقًا مظلمًا مع زوايا مدورة.

يبدو أن CSS الخاص بي: http://pastebin.org/447682

الكود في عنوان URL هو BASE64 لبعض أيقونة RSS العشوائية التي وجدتها على الويب. حاولت أيضًا إضافة عنوان URL نسبيًا إلى صورة ولكن دون أي نجاح.

إذا قمت بتغيير التعليمات البرمجية الخاصة بي لاستخدام قاعدة 64 من ملف Ext-touch.css ( http://pastebin.org/447685 ) إنه يعمل بشكل جيد ، فلماذا لا تقبل أيقونة "مخصصة"؟

ملاحظة: لست بحاجة إلى رمز RSS. لقد حاولت ذلك للتو لأغراض الاختبار.

Answer 1

Mrsoundless - عملت على محرك Theming في Sencha Touch. المشكلة هي أن علامات التبويب السفلية تستخدم أقنعة WebKit للرموز ، وليس صور الخلفية التقليدية. هذا يسمح لنا بملء شكل من الأيقونة التي تمر بها ، حتى نتمكن من تغيير لونه ديناميكيًا عند التحديد. للحصول على صورة تقليدية هناك ، استخدم background-image بدلاً من -webkit-mask-box-image. تشفير BASE64 كما أنت لا يزال على ما يرام.

Answer 2

على سبيل المثال في ملف .html الخاص بك

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

واستخدم الصورة المحددة أعلاه في tabpanel الخاص بك

iconCls: 'image',

Answer 3

على الرغم من طرح هذا السؤال في عام 2010 ، إلا أنه لم يسبق له مثيل عندما كنت أبحث عن حل. يبدو أن هذه الوظيفة قد تغيرت في Sencha 2.0 ، وقضيت بعض الوقت في محاربتها ، لذلك إليك ما هو مطلوب لتوافق 2.0:

CSS/ورقة الأنماط المضمنة

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

تعريف لوحة علامة التبويب app.js

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

حيث xxxxx هو اسم الرمز المخصص الخاص بك.

امل ان يساعد.