Ext JS make paging toolbar smaller - javascript

I have a very simple question but I don't seem to find a simple answer. In fact, I haven't found any answer how to make the paging toolbar of a Ext JS grid smaller.
I made a very simple fiddle to investigate how this works, and it looks like at some point ExtJS will dynamically calculate the positions of the elements in the paging toolbar. Specifically the 'left' css attributes are set.
So I would like to know how to tweak the function that calculates these values so I can decrease these values. I could use jQuery/Javascript to do this but that just sounds so wrong so I prefer a clean ExtJS way to do this.
So instead of something like this...
I would like to see this:
For instance, the 'previous page' button in my sample has an inline css style declared (most likely done by the paging toolbar widget) with 41px to left whereas the separator icon has 81px for the same 'left' style. This goes on until the entire width of the toolbar is covered.
So to conclude, what I want is to intercept the calculations and decrease the values of the elements to lower the entire width of the toolbar.
Any suggestions would be welcome.

First set the width of your button.
new Ext.Button({
width: 100, <<== width of the button
text: 'Smaller paging toolbar',
// ...
Then you can move your element to the right with a Toolbar Separator just before your button :
[
{xtype: 'tbseparator', width: 200 },
new Ext.Button({
// ...
Here is your corrected fiddle

Thought I'd post the answer to my own question. There's a config that enables horizontal scrolling when the toolbar gets too small:
Ext.create('Ext.PagingToolbar', {
overflowHandler: 'scroller'
}

Related

DHTMLX Scheduler timeline view - labels with longer text don't appear in tree mode

I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf
This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f

JSPDF Autotable breaks rows

In web app I'm using the JSPDF Autotable to build a PDF.
The problem is that the data will be dynamic (I'm going to use AngularJS 1.x) and so the rows can have differents height.
In some cases, Autotable breaks the last row of the page, continuing to the next one. How can I prevent this behavior, and set up Autotable to take the last row (which default would break) and bring it to the next page?
This is my code: https://jsfiddle.net/9vgxvfkh/1/
I guess I have to change some settings in the style:
styles: {
cellPadding: 1.5,
overflow: 'linebreak',
valign: 'middle',
halign: 'center',
lineColor: [0, 0, 0],
lineWidth: 0.2
},
pageBreak: 'always'
But I tried, and it didn't work.
P.S.: The margin top on the header is because then I will add an image.
Using the latest version this particular example is fixed. But for other cases where you don't want a multi line row to be split you can use rowPageBreak: 'avoid'.
Unfortunately, there is no way to do it using some parameters or styles.
I did a quick debug and found a solution for your problem, you need to modify the source code slightly.
In the source code I found that, for each row a method printFullRow is called, after that there is a check if the row can fit on the page (method canFitOnPage).
If row cannot fit on page, there is a check how many lines of text does it contain (in my case it is 10). Row is being split, because number of lines is bigger than 1.
You need to change this number to something bigger. In order to avoid further bugs you need to ensure how many lines would fit entire page height and put this number instead of 1. If you would choose some enormous amount, in case of really long text that wouldn't even fit entire page, it wouldn't be rendered at all, because common_1.addPage() would be executed endlessly.
To sum up, change line 470 to something like this:
if (row.maxLineCount <= 50) {
Unless 50 lines can't fit on page...
Before:
After:
Please check updated fiddle:
https://jsfiddle.net/9vgxvfkh/2/

Create scrollbars one an ext js dataview

On the project I am working on I have a dataview inside a panel which is constrained in size. I am having trouble figuring out how I can put scrollbars on the view to make sure that all the items in the dataview can all be displayed if they overflow the size of the dataview/panel. My code is very similar to that on http://try.sencha.com/extjs/4.0.7/examples/view/data-view/viewer.html.
If you edit this code and change the width of the dataview to something smaller e.g. 310 you will see that the images overflow the panel and are hidden. How can I put a scrollbar on this so that I can scroll to the hidden items? I have tried 'autoscroll: true' to no effect.
Your casing is wrong for autoScroll. Capitalize the S and it should work:
Ext.create('Ext.view.View', {
store: store,
autoScroll: true,
///...
})

Hide textarea text but not blinking cursor

I am trying to emulate how twitter highlights users when they are #mentioned when composing a tweet.
I am using the mentionsInput jQuery plugin. I want to change the color of the #screen_name instead of changing the background color as the plugin does by default.
Is there a way to color the #screen_name and still show the blinking cursor at the end?
I was able to do it but I need to hide the textarea text so it doesn't darken the CSS styled text over it... but then it hides the blinking cursor which I don't want to do.
See my jsFiddle showing the problem: http://jsfiddle.net/thhbe/1/
OR see it...
Required: jQuery, Underscore.js and the plugin.
HTML:
<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>
JS:
/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
];
data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
}
});
I'm a couple of years late, but hopefully I can provide an actual answer to your problem.
You (or the plug-in) have got the idea right... utilizing another element (the "facsimile element") which contains a styled version of the text in the textarea. There are just a couple of changes that need to be made:
The fascimile element is supposed to have the same dimensions (the element as a whole as well as its content area), shape, and position as the textarea
The fascimile element is supposed to be placed underneath the textarea rather than on top of it.
The background of the textarea is supposed to be made transparent.
The text and border of the fascimilie element is supposed to be made transparent.
I'm not sure how much of this is able to be done without modifying the plug-in, but once these changes are made, you shouldn't have to worry about the cursor disappearing since there will no longer be a need for you to hide the textarea.
You're not out of the woods just yet though, there is a lot more that needs to be done to make the solution robust.
So I'd recommend checking out Mentionator, which is a jQuery plug-in that robustly implements the functionality you desire. Its source code is a well-structured, easy to follow, and copiously commented, so should you want to look at the code to understand how the plug-in, and Twitter's tagging utility by extension (most likely), work, you should have little trouble doing so.
One more thing, given i'm such a big proponent of transparency, I'd like to let you know that Mentionator is maintained by yours truly :) .
The answer for me is to use contenteditable http://html5demos.com/contenteditable. It does not appear that this is how twitter has done it for their tweet input (which has mentions highlighted) but I have given up on figuring out how they did it.
I've had a similar problem and found it difficult to find a nice solution. I was implementing my own caret/cursor into the styled element with a span tag, this has some issues with splitting up words onto new lines however. But I found a solution that's pretty simple and seeing as this is the first thing on Google for this problem I'll share it, as this would have been ideal for me weeks ago if it was here! :)
As said, the solution is to have your styled element underneath the text input. You need to make the text input have a alpha=0 background and color. The color also hides the caret. But there's a CSS property specifically for the caret that you can use the unhide it:
background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );

ckeditor stops toolbar scrolling with the page

I want to stop the toolbar from scrolling with the page up and down. I am using ckeditor 4 "beta" as i want to use it's inline editing feature.
I looked through the config class properties without any luck:
"http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.config".
I took a look at the rest of the API for any hooks to the toolbar events with no luck either. I also tried to find where the toolbar listens to scroll events and remove it. No luck!
is there anyway to do this? Even if I need to dig into the code and change it by myself! I just need someone to point me to the right direction.
Indeed there's no such an option right now. We'll add some, but first we have to release final v4 version :).
Anyway - to stop toolbar floating update plugins/floatingspace/plugin.js:57 to:
function changeMode( newMode ) {
var editorPos = editable.getDocumentPosition();
updatePos( 'absolute', 'top', editorPos.y - spaceHeight - dockedOffsetY );
mode = newMode;
}
It works for me - toolbar is displayed above the content and it doesn't move.

Categories