Display Text - Diplay Field - extjs

I want to display a static text in my app which would be a tab in my tabpanel...
I can only find textfield with input... how do I get a textfield no input to show?
In sencha architect

I think you're looking for label component: http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.form.Label
Since you clarified that this is for Sencha Touch and not ExtJs, the only way to do is to use standard Ext.Component element and specify html property of it.

Related

Displaying Quill editor content with correct style

I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText

React : Material Ui's TreeItem not working properly

More specifically I'm talking about the 'icon' prop.
According to the documentation(https://material-ui.com/api/tree-item/) every TreeItem has a prop that allows you to insert an icon next to the label.
In my case, here is what happens:
showing text instead of the image
using it in code
To be mentioned is that I'm importing the image correctly. It's not working with direct links either.
Thanks in advance.

Can I customize a CustomInput button from reactstrap?

I'm using reactstrap in my project, however when I try to use a custom input to upload a picture, the component shows a button with the name "Browse", since I am creating a project in a different language, I need to change that "Browse" to "Another Word", I've reading the docs but did not find any solution
Change the css property of content for input type:
.custom-file-label::after {
content:"another word" !important;
}

ExtJS Change Button UI

Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo

In CQ5, how do I configure an extJS component?

This question is specific to Adobe CQ5, so ExtJS answers by themselves won't be that helpful.
I have a custom text component with a menu option to change the background color. We're referencing a colorfield component in our dialog.xml, and so far everything works. The color menu appears with the default set of colors in the palette and can be clicked. So far so good.
I would now like to customize the palette and only show a select set of colors specific to our client. How do I achieve this?
Here's the relevant dialog.xml snippet so far:
<bgcolor
jcr:primaryType="cq:Widget"
fieldLabel="Background color"
name="./bgColor"
showHexValue="true"
xtype="colorfield"/>
For future reference, you could probably get by creating a custom ColorField to call a custom ColorMenu which sets a custom ColorPalette. If ColorField had configurable options, these would probably be mentioned in the Ext docs or found in the JS file itself in /libs/cq/ui/widgets/..
Found it on dev.day.com - http://dev.day.com/content/kb/home/cq5/Development/HowToCreateCustomClientLib.html
Simply put, override the ExtJS widget with your own. Not ideal but it'll do.

Resources