How to disable a text field only while pressing tab key from keyboard in extjs?
You can set enableKeyEvents property of the textfield to true, then detect the tab keypress and disable your textfield:
{
xtype: 'textfield',
...
enableKeyEvents: true,
listeners : {
keypress : function(textfield, e, options) {
if (e.keyCode == 9) {
textfield.setDisabled(true);
}
}
}
}
If you set the tabIndex config of the textfield to a negative value, the textfield can't be reached with the tab key.
Example:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
tabIndex: 1
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
tabIndex: -1
}]
});
In this example, the email textfield can't be reached by pressing the tab key.
Related
I’ve created a FormPanel form for submitting some record in our database.
FormPanel Code:
Ext.define('MyApp.view.NIForm', {
extend: 'Ext.form.Panel',
config: {
id: 'NIForm',
items: [
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
id: 'ORDNUM_39',
width: '95%',
label: 'Order#',
name: 'ORDNUM_39'
},
{
xtype: 'button',
docked: 'right',
itemId: 'browseOrder',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'DESC',
style: 'margin-top:2px;',
label: 'Description',
name: 'DESC'
},
{
xtype: 'numberfield',
id: 'TNXQTY_39',
style: 'margin-top:2px;',
label: 'Quantity',
name: 'TNXQTY_39'
},
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
style: 'margin-top:2px;',
width: '95%',
label: 'GL Code',
name: 'GLREF_39'
},
{
xtype: 'button',
docked: 'right',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'REFDSC_39',
style: 'margin-top:2px;',
label: 'Reference',
name: 'REFDSC_39'
},
{
xtype: 'button',
action: 'niProcess',
itemId: 'mybutton3',
style: 'margin-top:6px;',
ui: 'confirm',
text: 'Process'
}
],
listeners: [
{
fn: 'onBrowseOrderTap',
event: 'tap',
delegate: '#browseOrder'
}
]
}
});
Now I want to get all textfields value on process button tap event, To get the formpanel value I've written following line of code.
var me = this;
var form = this.getNIForm();
var values = form.getValues();
var record = form.getRecord();
Can you tell me what am I doing wrong? Please explain.
Added another listener and it seems to work fine.
listeners: [{
fn: function () {
console.info('sdfsd');
},
event: 'tap',
delegate: '#browseOrder'
}, {
fn: function () {
console.info(this.getValues());
},
event: 'tap',
delegate: '#mybutton3'
}]
Here is the fiddle
If you want to retrieve particular TextField value use
Ext.getCmp('ORDNUM_39').getValue();
To get all form field values u can use like,
var form = this.getNav();
//if ur ref name inside ur controller is nav
I have added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 469,
width: 729,
title: 'My Panel 1',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
height: 238,
title: 'My Panel 2',
items: [{
xtype: 'gridpanel',
height: 179,
title: 'My Grid Panel 1',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
}, {
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}],
viewConfig: {
}
}]
}]
});
me.callParent(arguments);
}
});
I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :)
Also do not set fixed width and height if you want them to be managed automatically.
Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/
I have a tabpanel, and a button on the 1st tab. When i click on that button, i need to setfocus to the 2nd tab and activate it (as in show content that belongs to that tab). My code is as follows, and i unable to setFocus or activate that tab from the Button click event.
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
height: 250,
width: 400,
activeTab: 0,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
title: 'Tab 1',
items: [{
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}, {
xtype: 'panel',
title: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3'
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, options) {
// Set Focus, and activate the 2nd tab
}
});
Find the container of the tab panel. to get the container you can use Ext.getCmp
Ext.getCmp('center-region').setActiveTab('your-tab-name');
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-method-setActiveTab
There are also several examples of setting the active tab at the class level documentation.
i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...
I have taken the form example from Sencha Touch API
var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
});
and I have created a timeline object using
timeline = new Ext.Component({
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
tpl: ['<div></div>']
});
and then added the timeline to the panel as:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'light',
items: [timeline]
});
How can I add the form object to the timeline? Like how I can show that on it? Where I should add it?
Thanks for the response in advance.
I'm not sure what you are trying to do. Are you trying to have some kind of continuous carousel where you will put the FormPanel?
If so you should extend the Ext.Panel to make that timeline object and then as item use the xtype:'fieldset' and have the form items there.
For example:
App.views.Timeline = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
items:[
{
xtype: 'fieldset',
defaults: {
labelAlign: 'left',
labelWidth: 'auto',
}
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
}
]
});
}});
the Ext.Component is for showing data through the data property. The data is display according to the template you provide i.e. the tpl property but you need to specify the property of the objects you want to show. For example tpl:<div>{text}</div> and data:[{text:'Example'}]