PDA

View Full Version : Themespecific glyphs for checkboxes, fieldset-expand-tool a.s.o.



thecap
23 Oct 2015, 6:20 AM
Does anybody know how to set any other glyphs for checkboxes?

The mixin offers the ability: http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.form.field.Checkbox-css_mixin-extjs-checkbox-ui

I tried some Icons from the fontAwesome set (I set this as default iconfont). But I cannot get it work.

Sometimes one Icon is changed but it never shows the one that i set at the right status.

The same problem applies to fieldset:

https://www.sencha.com/forum/image/png;base64,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

https://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQYAAAA8CAIAAAALwYMUAAAIIUlEQVR4nO2aa1MTyRqA9+dZcqqos8dTJYKwApacgr2o3FIrEsVsIAnRgVzYCAiLwAJFNGeBIFm5HEg2hIUAIYhAYDLk1iaT7p9wPnQ5O51kIrAKK/s+NR+gme55e/I+zNs9+YIAACDji/MOAAD+WoASAMAASgAAAygBAAygBAAwgBIAwABKAAADKAEADJ+NErwgGCyWBEIZ7SlRjMXjxx9n2G4ftts/amjHJRaPp0TxU4wsTYoXBNUjDS8In+IqfxNOo0RKFMcnJmoaVf+pb8g+ahpV4xMT2Z/9i8nJjFxMIPSw3bgeCBznokpKLHm9Wo5LplLHDP68lEAIqfWGlbW1TzE4KPEROY0SHp+vuqExpw/0qG5o9Ph8Gb3WA4G2TlMymZRagjs7msdPsrM8J0pKnJRzfEqcjvVA4GG7Mf/EQYmPyGmUmHS58vhAj0mXK6NXAiEtx73Z3ZVaHE7n8bMTlMhzDijxETk7JQghw3b79Ows/TmZTLZ1mqSqaTMYrG5UXS66dr26xjU/jzFOIGSwWF5MTl6pqBy223lB0JlMQ+P2KxWVhaVl1r4+hBAhZMHtMVgshBB6vvPX12Vff1NQXKIzmaQ1xvLqalVd/eWiaw0tLZ3dPTR7FtweyQ3al2bSsN3ucDrvaVsvF12rqqvfDAYzBqltVsu9WvJ6r1fXXLpaVFVXvx7YyjMdqUpccHueDQ8/+dFWUFxyvbpmyeulvWLxuM5kKiguKSwt637+/F0yueD2XLpadOlq0b8rb9K+h3xYpdEUFJdcqagcfemgBWq2EvIZySfLC4LBbHkxNUVvY8/gIB0hJYqjLx3SvW23WOnlUqLYOzj05Y3yguISLceFBSFP/BeDM1VidWOj3WIVRZEQshcKPTI+plkrRCItRuNmMIgxPuB5td4Q3NlJIKTSaDjbU5r6vCBUNzT+8uoVXU+3dnT88uoVYZVQaTT3tK1CJIIQardYXfPzhBDh6KihpcW9vIwx3t3fv910/4NKXK+uWfH70+n09OvXBotFFEWlQfZCIZVG82Z3F2PsXl5W6/SxeFxpOnIl/lVeMTM3l06nfatrTa1t9D70j4wMjI3RCepNZhq//CnxLplst1iXvN40xtQf9/IyOaESN+/c5Ww2hJAQiTS1tq1ubBBC3MvL3/+gPeD5NMZzi0vl335HQ3U4nf0/jyCE0hg7nNNd/f0YY6X4LwanV2JiZibnXydmZpSUiMXjWo7bC4UIIa75+YHRMdq+5PUOjY9LpzmcTofTmUBI8/hJcGeHNtKnRDyRoL+u+P2czUY/HkkJ+fmzi4s0CaQzabuUPXmUeDE5SdsP+bDeZE4gpDTIm91dnclE8xVjHI3F0hgrTUeuhLmnl44WTyR0JhO9tG1gYMHjob2SySQdVq5EYHtb6kgI8fh8toEBckIlmnU64eiItg+Njy+4PYSQ3sGh2cVF6W7QUBFCRmvXIR+m7ZFoVMtxkWhUKf6LwZkqQQgZGB2bd7sxxuaeXvr/iRAyPTtLywPpGLbbMz7UjLWElCgZhVN2Eiy4PfIEPY4SNEvkF1UaBGPsmp+/26yecrnQ+9iUpiNXIuelw4LQ1tFptHZtv30r5b1ciRW//59f3ZCPTOd+ssJJdhulyZp7eqWqTwo1Govdbrovv1z5d7d5QVCK/2JwpoUTIWTF73868PyQD2s5LhqL0cac6+zPQglKShQX3B6VRuP89TXGWGk6H1SCEjo8tP300yPjY1q4y5Xw+HxPfrRl39VPpEQkGlXr9NnpDkpk8meUiMZidBHcPzIiNS55vebeP+oBSn4lchZOOZMgT+EkZbn86Z9TCaVBpPKGvK8rhKMjpenkV0Kqu2j7lMs16nCQrMKpraPznWwjOyMeuRJ6k1mqeaQyUkkJpcJJy3VItagEKJHJn1GCENI/MnKrtm7F75daDvlw/YOHdNWYEsWVtbVYPJ6txK3auv9OT0urz+zldU4lhEhEpdHQlfFeKPT9D1ravh4IqB5p9g8OUqLocDpv1dblUSJjkIaWFjrI6sbGA4NBiEQwxuuBrdpmNR8OK00nvxKiKLZbrDNzc2mMEULWZ330nEM+3GI0RqJRerJab6A3IY2xf3Mz/D7mDCUwxsauLvvEZBrjvVDobrM6vxIen++etpUur5e83pt37tJQR1869CYzfZ7vhUIbW1tK8Z8ikf6anN2rOnn3WvUDqWqibG1v37nffLnoWmFpmeXZs5xKaLmO7ueDX94ol+8eflAJQshmMJi9fyqK4tD4eGFpWWFpWWd3j5bryKMEIWQ9sJW9k4sxnpiZoZuwZV9/I21H5pzOBwunQz78wGCgm7B6k5lu46REseNp9z+KS+jg0jl0V/SA54nCe4m3+/s1KhXdHe7/eSS/EmmM6X43vRtNrW3SJuzA6NiViko6jnfld/pkBiUYTveFjovEsN1Oq5oLSQKhFqMxsL193oGcD5/N1/7Ol2QqZe3rW9vYpIXTPa1W2i67GOzu75t7eoVIJI3x/3777YK9ajgRoMRxOeB5LccVFJcUVVW9nHJmrJ4/dzDG3pXfaWVY3aiS3tn/DQElAIABlAAABlACABhACQBgACUAgAGUAAAGUAIAGEAJAGAAJQCAAZQAAAZQAgAYQAkAYAAlAIABlAAABlACABhACQBgACUAgAGUAAAGUAIAGEAJAGAAJQCAAZQAAAZQAgAYQAkAYAAlAIABlAAABlACABhACQBgACUAgAGUAAAGUAIAGEAJAGAAJQCAAZQAAAZQAgAYQAkAYPg/OahZDjI3jJEAAAAASUVORK5CYII=

joel.watson
26 Oct 2015, 11:41 AM
Hi--

Can you share an example of the mixin call that you're making, as well as the component configuration that you're using?

Re: the checkbox, it seems to be working for me:


@include extjs-checkbox-ui(
$ui: 'random',
$ui-checkbox-glyph: "\f243", // battery %25
$ui-checkbox-checked-glyph: "\f240", // battery full
);
....
{
fieldLabel: 'My CheckBox',
ui: 'random',
xtype: 'checkbox'
}



Thanks!
Joel

thecap
27 Oct 2015, 12:35 AM
Thanks, this works. Did not know about this syntax with the backslash as glyphs are set with a little different syntax inside Configs of JS-Files. It would be great if there were Tipps for such Differences inside the Documentation of the mixins or something like that. Thank you very much for your quick help!

joel.watson
27 Oct 2015, 5:37 AM
Thanks, this works. Did not know about this syntax with the backslash as glyphs are set with a little different syntax inside Configs of JS-Files. It would be great if there were Tipps for such Differences inside the Documentation of the mixins or something like that. Thank you very much for your quick help!

Sure thing, happy to help! I found the correct syntax to use by inspecting the /sass/etc/_variables.scss file in the font-awesome package.

Thanks!
Joel