We Keep Coding

ExtJS 5.0 - adding button as overlay to component

We are working with software supplied by a third party, and we are not allowed to modify it, can use only overrides.
I would like to create a new button and overlay it on top of a text input so that they are close together.
I'm having trouble getting the overlay to align, instead it appears top left on the screen. So of course it doesn't align to the text input. Sample code is below, in this case implemented in the view initComponent override after this.callParent([]); is called.
var viewport = Ext.ComponentQuery.query('viewport')[0];
var overlay = viewport.add({
xtype: 'panel',
fullscreen: true,
left: 0,
top: 0,
width: 120,
height: 40,
items:[{
xtype: 'button',
text: 'Find Address',
handler: function() {
alert('Got it!');
}
}],
styleHtmlContent: true
});
var textField = this.query('*[itemId=textField]')[0];
overlay.showBy(textField, 'c-c?');
I've tried using floating: true and lots of other approaches.
Once I get it to position properly, is there a way to have the button respond to tab order correctly? That is, tab out of the text field, then have the button get focus?

As I understand from your question, you have trouble with setting position to a component. If it is the problem, you can set xy coordinate. Look at this fiddle:
https://fiddle.sencha.com/#fiddle/tpl
viewport.down('#idOverlay').setXY([150, 140]);
Edit:
Ext.define('OverriddenViewport', {
override: 'ExampleViewPort',
initComponent: function() {
// Set up first
this.callParent([]);
this.add(overlay);
this.addListener('afterrender', function(viewport) {
viewport.down('#idOverlay').setXY([220,50]);
viewport.down('#idButton').addListener('blur', function(button) {
viewport.down('#idTextfield').focus();
console.log('textfield is focussed');
});
viewport.down('#idTextfield').addListener('blur', function(button) {
viewport.down('#idButton').focus();
console.log('button is focussed');
});
});
}
});

If you can access the source (just to look around) you maybe can create an override of the corresponding class. Create a override, and copy all of the code of the class (form?) into your override.
Here some additional info about creating overrides in ExtJs:
http://moduscreate.com/writing-ext-js-overrides/
https://sencha.guru/2014/12/04/abstract-vs-override/
In your override create a trigger (on the field you want to expand) with your functionality:
{
fieldLabel: 'My Custom Field',
triggers: {
foo: {
cls: 'my-foo-trigger',
handler: function() {
console.log('foo trigger clicked');
}
}
}
}

Load store in grid within a modal window

I have a widget with two grids.
When selected a row of the first grid is done the load of the second grid
according to the id_note sent on request.
If the grids are, for example, in a layout hbox, it works well.
However, when the second grid is within a modal window, the load of the store failed.
What is failing in my code?
(...)
},{
xtype: 'actioncolumn',
text:'Notes',
minWidth: 40,
flex:0.30,
align:'center',
items: [{
icon: 'resources/images/loadWin.png',
tooltip: 'show window',
handler: function(grid, record, item, index, e, eOpts){
var selectRow = grid.getSelectionModel().select(record);
var selection = grid.getSelectionModel().getLastSelected(record);
var id_note= selection.get('id_note');
var win = Ext.widget('popupWindow', {
animateTarget : item,
}).show();
var grid = Ext.ComponentQuery.query('#gridItemId')[0]; //grid within win
var store = grid.getStore();
store.proxy.extraParams = {
'id_note': id_note
},
//Right up to this point
store.load(); //**PROBLEM HERE**
}
}
(...)

The problem was to obtain the grid store reference in this case ( grid within window created dynamically).
I got the store reference with StoreManager (storeId) and now works well.
//var grid = Ext.ComponentQuery.query('#gridItemId')[0];
//var store = grid.getStore();
var store = Ext.getStore('storeId');
Thanks again Drake.

How to reset grid paging content on resolution change?

I have used a grid template from BootStrap and the paging for that grid is showing as per the attached image 1. Now when i change the screen resolution of the browser the paging content gets break into two lines as per attached image 2 instead of in a single line.
But once i refresh the page it loads the paging correctly as the image 3. But i want that content right after changing of resolution.
Below is the code of JS by using React for that paging class
var ul = React.DOM.ul({className: 'pagination pagination-sm', role: 'menubar', 'aria-label': globalizationFactory.translate('STORMS_PAGER'), key: 'pager_container'}, [firstLi, prevLi, this.getPages(currentPageIndex + 1, totalPages), nextLi, lastLi]);
var mainClass = this.props.className ? 'container-fluid ' + this.props.className : 'container-fluid';
return React.DOM.div({className: mainClass,key: 'pager_wrapper'},
React.DOM.div({className: 'row',key: 'pager_wrapper_inner'},
React.DOM.div({className: 'col-sm-12', style: {textAlign: 'center'},key: 'pager_innerWrapper'}, ul)));
Any suggestion will be helpful.
Image 1:
Image 2:
Image 3:

I think all you need to do is listen for window resize events and have that trigger a render. In React, if you change state, your component will render. You can do something like this inside of your component that is doing the rendering.
getInitialState: function() {
return {
windowWidth: window.innerWidth,
windowHeight: window.innerHeight
};
},
componentDidMount: function() {
return window.addEventListener('resize', this._handleResize);
},
componentWillUnmount: function() {
return window.removeEventListener('resize', this._handleResize);
},
_handleResize: function() {
if (this.state.windowWidth !== window.innerWidth || this.state.windowHeight !== window.innerHeight) {
return this.setState({
windowWidth: window.innerWidth,
windowHeight: window.innerHeight
});
}
}

Dynamically change height of rows of Kendo Grid on container Kendo window resize

I have two issues. I have a grid on a page which is contained within a Kendo window. I need the size of the grid rows to increase/decrease to ensure it fills the whole height of the window. I also have a grid on a different page which is just inside a Div that needs to be resized to fit the height of its container on the document window resize.
I have the following code given to me by Kendo support, but it doesn't do what I need it to do. It only sets the grid to be 100% of its container. But this leaves white space underneath the rows. I want to have no white space and for the rows to dynamically change their height so they all fit within the space together for one of them, and dynamically change the pageSize after calculating how many rows would fit in the size of the window for the other.
One of the grids is a top ten grid and the other is a list of all employees grid.
$(window).resize(function() {
var gridElement = $("#grid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});
Apologies for the amount of text but I've been stuck on this for days and wanted to give you as much info as possible.
EDIT: horizontal resizing works as intended out of the box. Why is the height any different? :S
EDIT2: Here is the code im using for my grid, this resides in the kendo window's content section
#(Html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>()
.Name("topTenPickersChart")
.Columns(columns =>
{
columns.Bound(b => b.operatorId).Title("Operator Id");
columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(b => b.operatorId).Editable(false);
model.Field(b => b.averagePicksLastThirty).Editable(false);
})
.Read("operatorTopTenPickRates", "DashBoard")
.Events(events => events.Error("error"))
.PageSize(10)
)
.Filterable()
)

For the following solution you need to have the table inside an HTML element that uses 100% of the area (width and height). For getting it what I do is define the HTML as:
<div id="container">
<div id="grid"></div>
</div>
and the following CSS style:
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Not, once the window is resized we need to do some maths...
$(window).resize(function () {
// Get container height
var containerH = $("#container").height();
// Get Grid height
var tableH = grid.element.height();
// Get Grid body height (the remaining is header and footer)
var bodyH = grid.table.height();
// The new height of the body is:
grid.table.height(containerH - tableH + bodyH - 1);
});
JSFiddle showing it here: http://jsfiddle.net/OnaBai/dB5CF/
EDIT: If your grid is inside a kendo window, then you have to:
You don't need the CSS definition.
You are not resizing $(window) but kendoWindow so I will put that code inside Kendo Window resize event handler.
You need to set an initial width for Kendo Window.
So your code should be something like:
$("#container").kendoWindow({
width : 400,
resize: function (e) {
console.log("resize", e);
var containerH = $("#container").height();
var tableH = grid.element.height();
var bodyH = grid.table.height();
grid.table.height(containerH - tableH + bodyH - 1);
}
});
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(100),
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
editable : false,
pageable : true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
And the modified JS Fiddle here: http://jsfiddle.net/OnaBai/dB5CF/2/

How to dynamically reset contentEl?

What is the best way to dynamically change contentEl? I can see update method, but it works with string/template input, and I can still use it to reset content using somehow innerHTML. But what about resetting DOM element itself?
var divA = document.createElement("div");
divA.innerHTML = "divA";
var divB = document.createElement("div");
divB.innerHTML = "divB";
var win = Ext.create('Ext.window.Window', {
title: 'An Example',
height: 200,
width: 400,
layout: 'fit',
contentEl: divA
}).show();
window.setTimeout(function() {
//this will work, but what about DOM?
var buf = document.createElement('div');
buf.appendChild(divB);
win.update(buf.innerHTML);
}, 2000)

You may use the replaceWith() method, along with the config object for the new element to create:
Ext.get(contentEl).replaceWith({ html: '<div>hello, world</div>' });