I want to display special spanish characters like á,Á,ã,Ã in combobox.SO, I wrote the code for it in locale file, Inglés and Español,etc. When I open the dropdown, it displays the word correctly but when I select it, it displays the code in the box. Similar thing happens with boxLabels, it shows the code instead of the special character. Can anyone suggest me a solution for it?
Thank you.
The problem occurs because elements on list are rendered as divs (so html entities works) while value box is rendered as input (entities dosen't work). Easiest way is to display national characters is to replace entities with actual unicode chars. You can do that by overriding setRawValue method:
Ext.define('Ext.ux.form.ComboBox', {
extend: 'Ext.form.ComboBox',
setRawValue: function(value) {
this.callParent([ decodeEntities(value) ]);
}
});
Fiddle: http://jsfiddle.net/9mjbf96o/2/
Related
I'm trying to show text with SpanLabel, but this component does not display all the text if there is line break. I then try it with TextArea and Label UIID, but the result is the same. Can someone help me on this issue? Thanks
I am having the same problem here. I use the SpanLabel inside a Dialog and the last one or two lines are always cut off.
It only happens when I use the setPreferredW property:
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
Is this intended?
Somehow the setMargin property doesn't work for the dialog, neither hard-coded, nor in CSS.
Here is my code:
private void dialolg () {
String longText = "'There should be the whole text displayed here, but it seems the last one or two lines always get cut off'";
spanLabelDialog.setText(longText);
dialogExplain.add(BorderLayout.CENTER, spanLabelDialog);
spanLabelDialog.setUIID("SpanLabelDialog");
spanLabelDialog.setTextUIID("SpanLabelDialog");
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
dialogExplain.show();
}
I would like to be able to achieve something like the following in Quill:
<ul>
<li>Something<br>
Else
</li>
</ul>
Out of the box, Quill removes the br and does not support adding a br inside of an li with either insertText(..., '\n', ...) or user editing.
I see how I can register a keyboard binding to handle, for example, "shift-enter" to be able to author content like this and it seems like both something that is possible to represent in Parchment and that there are the Blots to represent this in Quill (i.e Break, etc).
All that said, it's not clear to me if this use case is possible in the Quill editor through a module or not.
Any pointers would be super appreciated!
Thanks!
Here's a couple constraints to keep in mind:
Quill content must be represented canonically and modified unambiguously through the API. So if you had <ul><li>SomethingElse</li></ul> and used insertText(index, '\n'), there is ambiguity as to produce a <ul><li>Something<br>Else</li></ul> or <p>Something</p><ul><li>Else</li></ul>. In Quill core the former is not possible so there is no such ambiguity (note to produce <ul><li>Something</li><li>Else</li></ul> you would call insertText(index, '\n', 'list', 'bullet');). Therefore if soft breaks are added it cannot be represented with a newline character. The history with \r vs \n vs \r\n suggests it would be a bad idea to produce another newline character as the solution.
Architecturally it was convenient for the Quill data model to always have both a block and a leaf node in the corresponding DOM at all positions. <br> is used as the placeholder so <p><br></p> represents an empty line instead of just <p></p> (also older IE <= 10 did not render any height on <p></p> even if you specified it with CSS so the <br> was historically necessary). Internally blocks will add <br> and automatically when its last child is removed, and remove <br> when children are inserted. Given this special behavior (though modifiable through defaultChild), you do not want to extend the default <br> implementation.
So the suggestion I would make is to create a custom inline embed blot that uses and specify a class so it can disambiguate between the normal <br>. To insert it through the API it would be insertEmbed(index, 'customBr', true); and the JSON representation of <ul><li>Something<br class="custombr">Else</li></ul> from getContents() would be [{ insert: "Something" }, { insert: { custombr: true } }, { insert: "Else" }, { insert: "\n", attributes: { list: 'bullet' } }].
This seems to work but have not tested throughly: https://codepen.io/quill/pen/BJaOxP.
Basic problem is, when user tabs in a specific text input on a form, prefilled "+36" gets selected. I'd like to somehow put the cursor right after it (after the +36), instead of selecting the whole word. I've been thinking about disabling text selection of text inputs but no result yet. Googled a lot for it but couldnt find anything but disabling text selection on web pages, which is not really related. How could I solve this problem?
If you are using Jquery, you can try something like this on document ready
$(document).ready(function() {
$("input").focus(function() {
var input = this;
setTimeout(function() {
input.selectionStart = input.selectionEnd;
}, 1);
});
});
Please find the Jsfiddle for the same Jsfiddle Input Focus
In your form element put autocomplete attribute like below
<form method="post" action="/form" autocomplete="off">
</form>
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page
I'm trying to display the character count of various divs I have on a page.
I have this:
<div class="myText">Here is some text.</div>
<div class="myText">Here is some more text.</div>
I'd like to display the character count after each one. So the page would look like this:
Here is some text. 18
Here is some more text. 23
I know I can use jQuery:
$('.myText').text().length
combined with
document.write
but I have no idea how (I'm just starting to learn javascript). Also, the divs are generated by our CMS so there are going to be a lot of them and I'd like to get character counts for them all so maybe they each need different class names?
Any help would be appreciated.
$('.myText').each(function() {
var $this = $(this);
$this.append($this.html().length);
});