Why Menu items are not coming in IE10 using Extjs 4.1? - extjs

I have done application using ExtJs 4, contains feature menu. Menu items are showing nicely in all browser like IE9, Firefox, Chrome and Safari. But issue is coming when launch the same app in IE10 menu not showing menu items. when inspect the element menu it contains menu items data. Can anybody tell me why it is not displaying in IE10? How to showcase menu items data. i am adding dynamically items menu by using the reference of items. below is my code.
refs:[
{
ref: 'region',
selector: 'globalNavigationView > button[name="btnFilter"] > menuitem[text="Region"]'
},
Within FunCalling
Here regionValue contains list of items.
this.getRegion().menu.removeAll();
dynamicRegion=new Array();
for(var i=0; i<regionValue.length; i++){
var objSubR=new Object();
objSubR.cls= 'filterMenuCls';
objSubR.text=regionValue[i];
dynamicRegion.push(objSubR);
}
this.getRegion().menu.add(dynamicRegion);

Ext JS 4.1 does not support IE10, 4.2 does.

Related

Carousel with thumbnail images at the bottom

In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.

Automating CKEditor Combo Boxes using Selenium Webdriver

Following is the CkEditor I am trying to automate on my website:
CKEditor
I have automated clicking through the Bold, Italics, Subscript and Superscript buttons. However, the dropdown menu for Font color or Text style show up blank on the DOM as follows:
DOM for CKEditor
As you can notice, the span underneath the combo box element is empty. Thus any of the text color options available in the combo box do not show up on the DOM. How to automate clicking through various different text colors?
The issue is that at least this dropdown is inside an iframe. You have to switch context into that iframe before you can select something in the dropdown. The code below is working for me.
driver.findElement(By.cssSelector("a[title='Formatting Styles']")).click();
driver.switchTo().frame("cke_72_frame");
driver.findElement(By.cssSelector("a[title='Borderless Table']")).click();

kendo.resize for dataviz object

Issue with using kendo.resize inside the window.resize function. i need to bootstrap 3 functionalists for kendo chart, when i change the browser size so i used kendo.resize function. chart re sizing work perfectly only chart in visible area. as example i have kendo tab strip with two tab with 2 chart (tab 1 -chart1, tab 2-chart 2) when i click on tab 1 and re size the browser chart will re size, then go to tab 2 chart 2 is still in previous size when i re size the browser its again re size.
I suggest to look at example on kendo website:
http://demos.telerik.com/kendo-ui/bootstrap/
There is exactly what you request:
here is a sample code:
function resizeTabStripContent() {
kendo.resize("#tabstrip");
}
$("#tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
},
activate: resizeTabStripContent
});
// resize nested charts when window resizes
$(window).resize(resizeTabStripContent);
It resizes charts in tab strip on window resize event and when tab is activated.

Sencha Title Bar Overlaps With iOS7 Toolbar

There is a problem with the title bar on iOS7: the iOS7 toolbar overlaps the title bar and its buttons. The buttons are tapeable, but barely. I'm seeing this on the app I created, which is packaged as a native app using PhoneGap.
I'm sure the people at Sencha will fix it in a later version, but what's the best fix in the meantime? The so-so solution seems to be to use CSSĀ to push the content of the title bar down.
Thanks for any more graceful solution.
I found the solution (hack) in this page
basically you just have to compare if the iOS version is bigger equals than 7 and if it does, increment the height of the toolbar.
Here is the code:
app.js
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('StromRechner.view.Viewport'));
// Adjust toolbar height when running in iOS to fit with new iOS 7 style
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
Ext.select(".x-toolbar").applyStyles("height: 62px; padding-top: 15px;");
}
},

how to remove scrollbar after datastore removed?

i have a window with grid panel as the content...
when the window first shown, my store is empty and i can't see the scrorllbar (good)
when i load the data to store, i can see the scrollbar (good)
when i remove all data from store, i can still see the scrollbar and scrollable. when exactly there's no data in view (bad)
so my question is my title, how to remove scrollbar after datastore removed
here is the demo
Its is a open bug. Sencha team promises to fix it it 4.0.7. Have a look at this discussion at Sencha forum.
One possible solution given in the forum, is to hide the scrollbar using hideVerticalScroller() method. I did try it on fiddle but was not successful 100% (may be something to do with fiddle). I had to click "remove data" button twice to remove the scroll bar:
handler:function(){
storeSr.removeAll();
gridSr.hideVerticalScroller();
}
On the forum, they suggest doing (And this works!):
storeSr.removeAll();
var data = [];
var store = gridSr.getStore();
store.loadData(data, false);
if (data.length == 0) {
gridSr.hideVerticalScroller();
}

Resources