PDA

View Full Version : [Solved] Window.show and TextField focus



mohaaron
5 Aug 2009, 4:05 PM
OK, I've spent a half hour looking through forum posts and trying different possible solutions and nothing is working. Can someone help me make the textfield in the windows formpanel focus? All the commented out stuff is what I tried which did not work.

I'm currently using Firefox 3.5 if it makes a difference.



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddShipCombo.aspx.cs" Inherits="Tests_AddShipCombo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Ship Combo Test</title>
<link rel="stylesheet" type="text/css" href="../Common/Scripts/ext-3.0.0/resources/css/ext-all.css" />
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var shipStore = new Ext.data.JsonStore({
id: 'ShipId',
proxy: new Ext.data.HttpProxy({
url: '../WebServices/JobsWebService.asmx/GetShips'
,method: 'post'
,jsonData: {}
,headers: { 'Content-Type': 'application/json; charset=utf-8;' }
}),
root: 'd.rows',
totalProperty: 'd.totalRows',
idProperty: 'ShipId',
fields: ['ShipId', 'ShipName']
});
shipStore.load();

var shipCombo = new Ext.form.ComboBox({
id: 'shipCombo',
name: 'shipCombo',
renderTo: 'shipRenderer',
valueField: 'ShipId',
displayField: 'ShipName',
hiddenName: 'ShipId', // The value that should be bound/saved.
typeAhead: true,
minChars: 1,
mode: 'remote',
editable: true,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a ship',
store: shipStore
});

var addShipForm = new Ext.FormPanel({
id: 'addShipForm',
//layout: 'fit',
title: 'Add New Ship',
frame: true,
border: false,
labelAlign: 'left',
labelWidth: 70,
//trackResetOnLoad: true,
items: [{
xtype: 'textfield',
id: 'ShipName',
name: 'ShipName',
fieldLabel: 'Ship Name',
maxLength: 100
}],
listeners: {
render: function(form) {
console.log('addShipForm.beforerender');
//Ext.getCmp('ShipName').focus(false, 100);
}
}
});

var button = Ext.get('addShip');
button.on('click', function() {
addShipWin = new Ext.Window({
id: 'addShipWin',
layout: 'fit',
width: 250,
height: 150,
closeAction: 'close',
plain: true
,items: [addShipForm]
,buttons: [{
text: 'Add',
handler: function() {
Ext.Ajax.request({
url: '../WebServices/JobsWebService.asmx/SaveShip',
method: 'POST',
jsonData: { shipName: Ext.getCmp('ShipName').getValue() },
headers: { 'Content-Type': 'application/json;charset=utf-8' },
success: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Success', jsonData.d.ShipName + ' saved successfully');
addShipWin.close();
},
failure: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Failure', jsonData.d.message);
addShipWin.close();
}
});
}
}, {
text: 'Cancel',
handler: function() {
addShipWin.close();
}
}]
});
addShipWin.show();
// addShipWin.on('show', function(window) {
// console.log('window.show');
// Ext.getCmp('ShipName').focus(false, 100);
// });
});
});
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="shipRenderer"></div></td><td><input id="addShip" type="button" value="Add" /></td>
</tr>
</table>

</body>
</html>

mohaaron
6 Aug 2009, 11:17 AM
I've finally got the textfield to focus after the window.show event. I added the focus to the window.show event using a listener. I also had to use a delay of 500 as the 100 was not working.

Here is the code.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddShipCombo.aspx.cs" Inherits="Tests_AddShipCombo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Ship Combo Test</title>
<link rel="stylesheet" type="text/css" href="../Common/Scripts/ext-3.0.0/resources/css/ext-all.css" />
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var shipCombo = new Ext.form.ComboBox({
id: 'shipCombo',
name: 'shipCombo',
renderTo: 'shipRenderer',
valueField: 'ShipId',
displayField: 'ShipName',
hiddenName: 'ShipId', // The value that should be bound/saved.
typeAhead: true,
minChars: 1,
mode: 'remote',
editable: true,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a ship',
store: new Ext.data.JsonStore({
id: 'ShipId',
root: 'd.rows',
totalProperty: 'd.totalRows',
idProperty: 'ShipId',
fields: ['ShipId', 'ShipName'],
proxy: new Ext.data.HttpProxy({
url: '../WebServices/JobsWebService.asmx/GetShips',
method: 'post',
jsonData: {},
headers: { 'Content-Type': 'application/json; charset=utf-8;' }
})
})
});

var button = Ext.get('addShip');
button.on('click', function() {
addShipWin = new Ext.Window({
id: 'addShipWin',
layout: 'fit',
width: 250,
height: 150,
closeAction: 'close',
plain: true
//,items: [addShipForm]
,items: [{
xtype: 'form',
id: 'addShipForm',
//layout: 'fit',
title: 'Add New Ship',
frame: true,
border: false,
labelAlign: 'left',
labelWidth: 70,
//trackResetOnLoad: true,
items: [{
xtype: 'textfield',
id: 'ShipName',
name: 'ShipName',
fieldLabel: 'Ship Name',
maxLength: 100
}],
listeners: {
render: function(form) {
console.log('form.render');
//Ext.getCmp('ShipName').focus(false, 100);
}
}
}]
,buttons: [{
text: 'Add',
handler: function() {
Ext.Ajax.request({
url: '../WebServices/JobsWebService.asmx/SaveShip',
method: 'POST',
jsonData: { shipName: Ext.getCmp('ShipName').getValue() },
headers: { 'Content-Type': 'application/json;charset=utf-8' },
success: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Success', jsonData.d.ShipName + ' saved successfully');
addShipWin.close();
},
failure: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Failure', jsonData.d.message);
addShipWin.close();
}
});
}
}, {
text: 'Cancel',
handler: function() {
addShipWin.close();
}
}]
,listeners: {
show: function(window) {
console.log('win.show');
Ext.getCmp('ShipName').focus(false, 500);
}
}
});
addShipWin.show();
});
});
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="shipRenderer"></div></td><td><input id="addShip" type="button" value="Add" /></td>
</tr>
</table>

</body>
</html>

the.jxc
10 Aug 2010, 2:56 PM
Heya. Just to say. "defaultButton" is the official way of doing this.

However, note the glitch introduced in 3.2 if your parent HTML document does not entirely contain the field you wish to have focus. Here is the thread.

/showthread.php?106537-Cannot-get-focus-into-a-TextField-in-a-popup-window/ (http://www.sencha.com/forum/showthread.php?76721)