We Keep Coding

menuHide gets called on clicking on expand button in a treepanel in IE9/10

Question
I have a button which when clicked shows a menu using menuShow function. The menu has a treepanel which has many parent nodes and child nodes. The problem is when we click on expand arrow of any parent child the function menuHide() gets called and instead of expanding the menu collapses. The problem is specific to IE9/10 and it is working fine with Chrome.
Code
The piece of code for button is :
'Ext.button.Button', {text: '<span class="Copy" style="color:#000000"><I>Click to select a scenario<I></span>',
listeners: {menuHide : function(btn, menu, opts) {//logic},
menuShow : function(btn, menu, opts){ //logic}},
menu : {
xtype : 'menu',
styleHtmlContent : 'true',
width : 300,
style :{
'border': '0px solid #FFFFFF'
},
shadow : false,
items : [{ xtype: 'label', width : 250, text: 'click here'},
{
xtype : 'treepanel',
autoScroll : 'true',
itemId : 'treePanelID',
height: 190,
width : 270,
store : this.store,
style : {'font-family': 'Helvetica Neue,Arial',
'font-size': '18px',
'font-weight': 'bold',
'line-height': '20px',
'letter-spacing': '0px'
},
useArrows : true,
margin : '-20 0 0 15'
columns: [{
xtype : 'treecolumn',
dataIndex : 'text',
menuDisabled : true,
width : 100,
flex : 1,
renderer : function(value, values,record)
}],
listeners : {
itemclick : function( record, index, eOpts ){
if(index.isLeaf()){ logic }
else{ logic}
} } }]}}

ExtJs 3.4 : Enable a button on grid row selection

I have an Ext grid panel as following.
var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
xtype : 'actioncolumn',
header : "GPS",
items : [ {
icon : 'images/gps.jpg',
tooltop : 'Get GPS',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('locationName'));
}
} ]
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'/*,
listener : {
selectionchange : function() {
Ext.getCmp('btnHold').enable();
}
}*/
//renderTo : document.body
});
The data of this grid panel are coming from another grid. And also I have a button in a button group as following.
{
text : 'Hold Drop/Pick',
id : 'btnHold',
iconCls : 'add',
width : 120,
// textAlign: 'center',
//style : 'margin:5px',
style : {
textAlign: 'center',
margin : '5px'
},
disabled : true
}
This button is disabled. What I want is, I need to enable this button when user clicks a row of the grid panel.
I am using ExtJs 3.4.
How should I do that ?
Kind regards

Use 'rowclick' listener (for grid):
listeners: {
rowclick: function(grid, idx){
Ext.getCmp('btnHold').enable();
}
}
P.S. It's very bad when you use 'id' parameter in your components. Try to remove it and get access to button by using another components. Sorry for my english, guys!

Why is this Fancybox height and width not working?

This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.

Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs

Activity indicator in Titanium not working

I want to show an activity indicator in my screen using Titanium but it is not showing me any result. It is not showing any progress sign.
Here is my code:
var actInd = Titanium.UI.createActivityIndicator();
actInd.message = 'Please wait...';
//message will only shows in android.
var self = Ti.UI.createWindow({
title : "About",
navBarHidden : false,
barColor : "#50b849",
backgroundColor : "#2d2d2d",
});
self.add(actInd);
actInd.show();
self.orientationModes = [Titanium.UI.PORTRAIT];
var text = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory + "info.txt").read();
var infoText = Ti.UI.createTextArea({
width : "100%",
height : "100%",
color : "#fff",
backgroundColor : "#2d2d2d",
value : text,
editable : false,
scrollable : false,
font : {
fontWeight : 'bold',
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
autoLink : Ti.UI.AUTODETECT_LINK
});
infoText.addEventListener("click", function() {
Ti.Platform.openURL("http://tellusanotherone.org/c2p");
});
var scrollView = Ti.UI.createScrollView({
width : "100%",
height : "100%",
verticalBounce : true,
scrollType : "vertical",
});
scrollView.add(infoText);
self.add(infoText);
return self;
Thanks in advance.

Just create file (lib/indicator.js) and add the following code int it
function createIndicatorWindow(args) {
var width = 180,
height = 50;
var args = args || {};
var top = args.top || 140;
var text = args.text || 'Loading ...';
var win = Titanium.UI.createWindow({
height: height,
width: width,
top: top,
borderRadius: 10,
touchEnabled: false,
backgroundColor: '#000',
opacity: 0.6
});
var view = Ti.UI.createView({
width: Ti.UI.SIZE,
height: Ti.UI.FILL,
center: { x: (width/2), y: (height/2) },
layout: 'horizontal'
});
var style;
if (Ti.Platform.name === 'iPhone OS') {
style = Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN;
} else {
style = Ti.UI.ActivityIndicatorStyle.DARK;
}
var activityIndicator = Ti.UI.createActivityIndicator({
style : style,
height : Ti.UI.FILL,
width : 30
});
var label = Titanium.UI.createLabel({
left: 10,
width: Ti.UI.FILL,
height: Ti.UI.FILL,
text: text,
color: '#fff',
font: { fontFamily: 'Helvetica Neue', fontSize: 16, fontWeight: 'bold' }
});
view.add(activityIndicator);
view.add(label);
win.add(view);
function openIndicator() {
win.open();
activityIndicator.show();
}
win.openIndicator = openIndicator;
function closeIndicator() {
activityIndicator.hide();
win.close();
}
win.closeIndicator = closeIndicator;
return win;
}
// Public interface
exports.createIndicatorWindow = createIndicatorWindow
Use in your code like this
var uie = require('lib/indicator');
var indicator = uie.createIndicatorWindow();
someViewObject.addEventListener('click', function(e) {
indicator.openIndicator();
setTimeout(function() {
// Do the work that takes a while
// and requires an activity indicator
indicator.closeIndicator();
},0);
});

Ext JS - How to Scroll to bottom of Textarea

This is my code below. How can I scroll to bottom of textarea?
It must be something like
Ext.getCmp('output').setScrollPosition(Ext.getCmp('output').getScrollHeight());
Here is my code for the textarea:
var myWin= new Ext.Window({
height : 340,
title : 'CHAT',
modal : true,
resizable : false,
draggable : false,
closable : false,
width : 477,
layout : 'absolute',
bodyStyle : 'padding : 10px',
buttonAlign : 'center',
items : [
{
id : 'output',
xtype : 'textarea',
width : 216,
readOnly : true,
autoScroll : true,
height : 234,
x : 10,
y : 10
},
item6,
{
id : 'input',
xtype : 'textfield',
width : 443,
y : 249,
x : 10
}]
...

I don't think there is ExtJs method to scroll textarea, however you can use HTML textarea properties:
var t = Ext.getCmp('output'),
t1 = t.getEl().down('textarea');
t1.dom.scrollTop = 99999;
Here is the question where it was discussed: Dynamically Scrolling a Textarea

var d = Ext.getCmp('output').getEl().down('textarea').dom;
d.scrollTop = d.scrollHeight - d.offsetHeight;