how to set focus on a field in a dialog?

I created a basic dialog, and need to set focus on the first textbox inside the dialog. Can anyone offer help to me?

Thanks in advance.

Did you give the textfield an id? Are you using the dynamic form capabilities or are you using pre-generated markup?

If you are using dynamic forms you can do something like this:

Ext.getCmp('myTextField').focus();

Thanks for the reply.

I do have an id assigned to the text field, and it's pre-generated markup. Should I use Ext.getDom("myTextField").focus() instead?

Thanks for your kind help.

Yes, you can do that or use the Ext flyweight element.

Ext.fly('myTextField').focus();

Can you show us some more code? and the existing markup which you are using.

Did you try Ext.getCmp(fieldid).focus()?

Yes, you can do that or use the Ext flyweight element.

Ext.fly('myTextField').focus();

Thanks. i tried Ext.fly('myTextField').focus(), but it does not work. This is my code:

_thisDialog.show(el);
Ext.fly("myTextId").focus();

Anything wrong with that? Thanks a lot.

Can you show us some more code? and the existing markup which you are using.

Thanks for your reply. I use the Extjs example code. The RED highlight is part you maybe interested. Your help will be greatly appreciated.

-- Hello.js --

var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
Ext.fly('myTextBox').focus();
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(HelloWorld.init, HelloWorld, true);

-- hello.html --

Hello World Dialog Example

Hello World Dialog

This example shows how to create a very simple modal BasicDialog with "autoTabs".

Note that the js is not minified so it is readable. See hello.js for the full source code.

Here's snapshot of the code that creates the dialog:

dialog = new Ext.BasicDialog("hello-dlg", {

        modal:true,

        autoTabs:true,

        width:500,

        height:300,

        shadow:true,

        minWidth:300,

        minHeight:300

});

dialog.addKeyListener(27, dialog.hide, dialog);

dialog.addButton('Close', dialog.hide, dialog);

dialog.addButton('Submit', dialog.hide, dialog).disable();

Hello Dialog

#If you have any other info about this subject , Please add it free.#

PNNL, SGI Think Big Danes Launch Europe's First 24-Hour Internet TV Station

Archives

Categories

Search

Meta

Credits

15 March, 2010 |

how to set focus on a field in a dialog?

Hello World Dialog