We Keep Coding

Vertical Scrollbar is not visible in IE 11 for textarea

I have on TextArea and in that I have given a vertical scrollbar, My textarea is readonly. But what i noticed here is my scrollbar is not visible in IE11. Top and bottom arrow is coming but scroll bar is not coming.
My Code :
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
When I run this into fiddler in IE11 I'm not able to see scroll. I attach the screenshot.
Any suggestion or help.

That is just IE being IE ... if you provide specific height (like in this case I did with 100) to that textarea IE will show the scrollbar ... it is just by default ugly looking one with two big arrows:
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
height : 100,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
See it here

Titanium error in creating a form

I am new to titanium appcelerator and getting an error while creating a form with textfields and buttons..In this page there are 3 textfields and a button
Here is my code
var win1 = Titanium.UI.currentWindow;
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor:'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom: 40,
text:'Registration',
color:'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Username',
color:'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text:'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40, color:'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Password',
color: '#336699',
keyboardType: Titanium.UI.KEYBOARD_PHONE_PAD,// This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType: Ti.UI.RETURNKEY_DONE,
passwordMask:true,//This makes the letter display in ***** format
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Fullname',
color:'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title: 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click',function(e)
{
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url:'page2.js'
});
win2.open();
});
aview.add(buttons);
and these are the errors which I get when running the application,please help
Errors:
[ERROR] : TiExceptionHandler: (main) [235,235] ----- Titanium Javascript Runtime Error -----
[ERROR] : TiExceptionHandler: (main) [0,235] - In app.js:1,69
[ERROR] : TiExceptionHandler: (main) [0,235] - Message: Uncaught TypeError: Cannot call method 'add' of null
[ERROR] : TiExceptionHandler: (main) [0,235] - Source: h:Titanium.UI.FILL,height:Titanium.UI.FILL,layout:"vertical"});win1.add(aview)
[ERROR] : V8Exception: Exception occurred at app.js:1: Uncaught TypeError: Cannot call method 'add' of null

Check this out : I think this is your app.js, if yes it will work.
var win1 = Titanium.UI.createWindow({backgroundColor: "#ffffff"});
win1.open();
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor : 'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
var headings = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom : 40,
text : 'Registration',
color : 'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Username',
color : 'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text : 'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
color : 'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Password',
color : '#336699',
keyboardType : Titanium.UI.KEYBOARD_PHONE_PAD, // This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType : Ti.UI.RETURNKEY_DONE,
passwordMask : true, //This makes the letter display in ***** format
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Fullname',
color : 'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title : 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click', function(e) {
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url : 'page2.js'
});
win2.open();
});
aview.add(buttons);

Extjs scroll two panels in parallel

I have two panel and both have autoScroll: true. I want them to scroll in parallel; that is, scroll one, the other should automatically scroll as well.
My Code:
Ext.define('CompareDailog', {
extend : 'Ext.window.Window',
width : '100%',
height : '100%',
resizable : true,
closeAction : 'destroy',
editMode : false,
padding : '1 1 1 1',
layout : {
type : 'border',
align : 'left',
padding : '5 5 5 5'
},
items : [{
xtype : 'panel',
id : 'originalDocument',
title : 'Original Document',
width : '50%',
height : '100%',
region : 'west',
autoScroll : true
}, {
xtype : 'panel',
id : 'modifiedDocument',
title : 'Modified Document',
width : '50%',
height : '100%',
region : 'east',
autoScroll : true
}],
buttons : [{
text : 'Cancel',
handler : function() {
this.up('window').close();
return;
}
}]
});
I search but not found any scroll listener or move scroll to anty specific position. nay help is appreciable. Thanks

Here is the another aspect for Ext.Panel component. Basically, you can set scrollbar position of an element by body.dom property.
ExtJS - Synchronize Two Panel Scrollbars
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
})

Here is fiddle. If you have any problem, let me know.
Synchronize Two Grid with Scroll

This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow.
See this fiddle.
So, what I've come up with is to add a delay to the event:
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
}, panelOne.body, {delay: 50 }); //delay 50 seems to fine to me. adjust if you must

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!

ExtJs - Strange textfield render behavior

I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.

The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'