YUI3 Scroll-Datatables in TabView don't render - javascript

I have some tabs in YUI3 Tabview. Each tab contains a couple of YUI3 Scrollable Datatables.
The datatables are created but are not rendered. All I can see is a part of 1st column of each datatable.
Howeveer, if I resize the browser window, I can see the tables rendered. I suspect that I have to somehow re-render the tables each time I switch to a different tab. How can I do this?
The datatables are created independent of Tabs/Tabview.
Any help would be greatly appreciated.

Yes, scrolling DataTables need to be in a visible container when rendered because they need to calculate the size of some elements of the table, which they can't do if they are under display: none in a hidden tab. The way to avoid this is to wait until the tab that will hold the datatable is shown. You can do that by listening to the "after" stage of the selectedChange event of the Tab. For example:
tabview.item(1).after('selectedChange', function (e) {
if (e.newVal) {
table.render();
}
});
Here's a working example: http://jsfiddle.net/juandopazo/H2ASR/2/

Related

jQuery on 'click' not triggering after change to a bootstrap table

situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!
You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.
The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle

singleton menu panel not working in extjs 5

I was working with extjs 4 where i created the menu panels using singleton pattern for number of toolbars and it work well, but when i moved my application from extjs 4 to extjs 5 it stop to work, means the menu panel get hidden when mouse move over it. I have created one sample example on fiddle please give me some solution over this problem.
fiddle link: singleton menu panel example
Thanks,
Sandy
In Ext JS 5 menus seem to be linked to their owner components (e.g. button) and cannot be shared between owners. This is why, in your example, the issue happens on the 1st and 2nd panel only but not the last one (3rd) — its button becomes the "legal" owner of the menu and hence it works fine under there.
There is actually no need to share the menu in your example. Instead of repeating the same code three times, leave just one docked toolbar, use the menu in only one place and make it all smarter. See example: https://fiddle.sencha.com/#fiddle/s1b
UPDATE
If sharing the menu between buttons is a requirement, it can be achieved by using custom button that forcibly makes sure that its menu belongs to itself on each menu show request:
Ext.define('SharingMenuButton', {
extend: 'Ext.button.Button',
alias: 'widget.sharingmenubutton',
showMenu: function() {
if (this.menu.ownerCmp !== this) {
this.setMenu(this.menu, false);
}
return this.callParent(arguments);
}
});
See your example working with that in place: https://fiddle.sencha.com/#fiddle/s1g

how to call a method on grid column selector menu's hide evnet in ExtJS

Want to fire a method on header column selector on hide so that I can capture and save the selected items to display when user returns to the page.
Tried following things which did NOT WORK
Ext.getCmp("gridBox").headerCt.getMenu().on('hide', this.addUpdateAnalysisSetting, this);
Ext.getCmp("gridBox").column.menu.on('hide', this.addUpdateAnalysisSetting, this);
Even tried to capture the event of second menu as below but even that didnt work
Ext.getCmp("gridBox").headerCt.getMenu().items.last().menu.on('hide', this.addUpdateAnalysisSetting, this);
Any help is appreciated
Saving the state of the grid (shown/hidden columns, their widths) does not need to be that complicated. You only need to do three things:
Initialize a state provider
Set stateful:true on the grid
Set a stateId on the grid

ExtJS Using Tab to navigate between two grids

I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.
I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.

jqPlot graph in accordion

I want to plot a graph within a jQuery accordion but it causes the graph to chopped and the scales to be displayed. Anyone got a fix for this?
As explained on jqPlot's Tab and Accordion UI Widgets page, jqPlot needs to know the size of the chart when it's plotted, and it can't do that if the chart is hidden by an accordion or tab. The solution is to either specify the chart's dimensions in an alternate fashion or to call replot when the accordion is expanded. See Tab and Accordion UI Widgets for full details and example code.
Everything in the accordion is hidden until it is expanded, which means it is dimensionless. You need to wait until the portion of the DOM your accordion chart is contained in is shown, and then plot the graph. If you look at the ui.html example included in the latest release of jqPlot, you'll see this:
Here, the plot is created at a div named chart1, which is inside a hidden jQuery UI Tab:
plot1 = $.jqplot('chart1', [l1, l2, l3], {
title: "I was hidden",
lengend:{show:true},
series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
cursor:{show:true, zoom:true},
axesDefaults:{useSeriesColor:true}
});
And then an event handler is registered with the 'tabsshow' event fired by the jQUery UI Tab. In your case, you'll want to register a handler for the 'accordionchange' event fired by the jQuery UI Accordion widget upon completion of changing the accordion's state. Here's how you bind to the Tab's 'tabsshow' event for the above code example:
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot1._drawCount == 0) {
plot1.replot();
}
else if (ui.index == 2 && plot2._drawCount == 0) {
plot2.replot();
}
});
There's also a working example in the same ui.html file with an accordion. You can find the example in the latest release from bitbucket here: jqplot.1.0.0a_r701
Also, make sure that you don't instantiate multiple jqPlot objects on the same div, or you'll have plots sitting on top of one another and overload the browser.
Hidden elements, like a tab or accordion element have no size, so you may want to use a technique mentioned in jqplot's documentation, ie.:
provide dimensions of the graph in an alternative way (eg. data-height and data-width attributes) AND
call replot() when the graph gets displayed.
However, the example in the documentation uses for 2. an event name which can be incorrect with your version of jquery-ui. For example, if you use Bootstrap 3, the proper event has a different name: "shown.bs.tab".
Links:
http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
http://getbootstrap.com/javascript/#tabs-events

Categories