positioning of date picker in extjs - javascript

I'm using the date picker but I am a little confused about where it decides to place the date picker on the screen. On one screen it's fine but on another it gets stuck hiding behind a flash object. Can I force it to attach to the bottom right corner of the place where the datebutton is clicked? I was looking in firebug and it seems to just have random left and bottom variables in CSS which I'm not sure where they're pulled from. Thanks

Before attempting to reposition the date field's menu try setting the Flash object's 'wmode' property to 'opaque'. Depending on how the Flash object is embedded this should allow the menu to appear above it.
If you are still wanting to force a new alignment position of the menu then try overriding the DateField instance's onTriggerClick method:
new Ext.form.DateField({
fieldLabel: 'Choose a date',
onTriggerClick: function() {
Ext.form.DateField.prototype.onTriggerClick.call(this);
this.menu.show(this.el, 'tl-br?');
}
});
This align's the top-left corner of the menu with the bottom-right corner of the field. See the documentation of Ext.Element.alignTo for other possible values to pass to the second parameter of the show method.
This is a bit of a hack as it results in the menu's show method being called twice, but the alternative is rewriting onTriggerClick to pass your chosen position on the first call.

In version >= 4.0.0 use the pickerAlign property.
Ex:
{
xtype: 'datefield',
fieldLabel: 'Date',
pickerAlign: 't-br?'
}
Advice from owlness about seeing the docs on Ext.Element.alignTo for an explanation of how pickerAlign works is still valid.

Related

How to make the search icon permanently visible in the column in ag-grid?

I want to make the filter icon visible permanently in the Ag-grid. The current behaviour is such that the filter icons in the columns only become visible when I hover across the column headings .
This is an example of the column definition that I am using.
this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]
How can I achieve this result?
The correct answer is here to set suppressMenuHide in gridOptions or directly on HTML [suppressMenuHide]="true"
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
You can achieve it with just a small CSS. No need to consider ColDef.
Have a look at the plunk I've created: Built-In Filters Icon - show by default
.ag-header-icon.ag-header-cell-menu-button {
opacity: 1 !important;
}

Ext JS make paging toolbar smaller

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'
}

React Native: How to keep multi-line textinput visible above keyboard

I have a TextInput with multiline set to true.
I am scrolling to the input on focus with:
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
React.findNodeHandle(this.refs.myInput),
0,
true
);
However when the multiline TextInput expands the text will be hidden beneath the keyboard.
I only want to scroll down when the cursor/current text is not visible. So I can't just run the code above on text change as it would scroll the view even if the current cursor/current text is visible (like editing on the first line).
Is there any way to get the cursor/current text position on screen?
Or is there any other way to do what I'm trying to?
Currently:
What I'm trying to achieve:
You may use the onLayout method, provided by the View (which Text extends). It returns the dimensions of the view, which you may use to recalculate the scroll position of your scrollview.
The best way to do it seems to be with the react-native-keyboard-aware-scroll-view library and use the method _scrollToInput and follow what the docs say.
The one thing I had to change was to call "this.scroll.props.scrollToFocusedInput(reactNode)" instead of "this.scroll.scrollToFocusedInput(reactNode)" in the docs!
I found this component... but it's not working for me (I get errors on "import"). I assume that they will get fixed eventually.
https://github.com/VansonLeung/react-native-keyboard-aware-view

Overlapping tooltip in Extjs Grid

I have an issue that I’ve been trying to resolve. I’m very new to Sencha ExtJS. I’ve included image links to assist my explanation.
I have a Tooltip that displays “Double-click to Configure” when you move your MouseOver the header of a table which works fine.
Shown here: http://img227.imagevenue.com/img.php?image=952843717_Header_122_41lo.jpg
Also
I have a Tooltip that displays “Show Available Options” when you move your MouseOver the gear icon.
The problem is that the gear icon is within the header so when you mouseover the gear icon, the header tooltip also displays displays. Shown here
http://img157.imagevenue.com/img.php?image=952937141_Config_122_421lo.jpg
I really don’t know how EXTJS renders it’s grid but is there a way for me to place the gear icon outside of the header or not display the “Double-click to Configure” Tooltip when a user mouseovers the gear icon?
I’m Not sure where to look in the code I have a file uiconstant.js that creates all the UI constants in a Static class
UIElements:
{
SIMULATION_GRID: 'simulationgrid',
REPORT_SCHEDULER: 'reportscheduler',
BLENDED_BENCHMARK: 'blendedBenchmark',
BLENDED_BENCHMARK_GROUPINGS: 'blendedBenchmark_groupings',
DEFAULT_CONTAINER_LABEL: 'Click to configure container',
EDIT_CONFIGURE_CONTAINER_LABEL: 'Click to edit configuration',
DO_NOT_REQUEST_CONTENT_LABEL: 'Automatic calculation off for this dashboard.',
NO_RECORDS_FOUND: '<div class="no-records-found">No records found</div>',
CONTAINER_PANEL: 'containerPanel',
DoubleClickToConfigure: 'Double-click to Configure'
}
I also have a ContainerPanel.js File that Represents the custom panel for the container.
Not sure if I am looking in the correct files to make this change or update the grid
Ext.create('Ext.tip.ToolTip', {
target: header,
html: UiConstant.UIElements.DoubleClickToConfigure
});
Tooltip is supported for tools so you can configure the gear with a tooltip text. Now, header does not directly support tooltips - you handle it above by creating one and setting its header.
Let's try a bit different approach: tooltip on gear tool is de facto quicktip - only one instance of quicktip exists at a time.
To create quicktip for the header do this:
panel.getHeader().getEl().set({'data-qtip':'Your text here'});
Note: There shall always be an area around the gear tool where the tooltip changes - not sure if it is acceptable for your use case. Nevertheless, two tips shall not appear.

Repositioning jQuery UI Autocomplete on browser resize

There is an issue if you open up an autocomplete drop down and also resize your browser window the autocomplete drop down does not reposition. Highlighted in this video: http://www.youtube.com/watch?v=d7rZYH0DgWE
I have looked at the documentation and cannot find a reposition method (in the jquery-ui documentation http://jqueryui.com/demos/autocomplete) that can be called within a $(window).resize() function call.
Is there an elegant soultion to this?
I would suggest just closing the results on a page resize.
$(window).resize(function() {
$(".ui-autocomplete").css('display', 'none');
});
When a use changes the width of the window it will disappear and if they type again it will re-appear as it should, positioned correctly.
Looking at this again one way to solve this problem is just to call the autocomplete field to search on resize:
e.g
$(window).resize(function() {
$( "#autocomplete-field" ).autocomplete( "search" );
});
This will reposition the autocomplete dropdown.
You may also wish to make sure autocomplete caches the results so it doesn't hit the database when searching again. And another thing to consider is calling autocomplete( "search" ) within a timeout function to improve ui responsiveness Cross-browser window resize event - JavaScript / jQuery
Here is another solution if you don't want to redo the search or close the window.
$(window).resize(function() {
var position = $("#autocompleteField").offset();
var properties = { left: position.left,
top: position.bottom };
$(".ui-autocomplete").css(properties);
});
Yes it is possible, but it's very tricky. You must alter both the css and plugin. It's default functionality sets the top and right attributes. You must alter the plugin to position the div ( or ul ) relatively to the document's width and height. (ie top:50%, right:50%; margin-left:-500px; margin-top:-100px).
You can also destroy the division on resize if you don't want to mess it up. It will reappear on change based on the document's new width and height
Calling the autocomplete field to search on resize works for me. One thing to add: Make sure that search is only performed on resize when a search result is visible. Otherwise, search is executed even after having selected one item from the result box.

Categories