We Keep Coding

How to remove disabled attribute in Ext JS

I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?

As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})

How to view another component in extJS?

I was trying to add a registration form in my login application but it seems that I could not view the registration form. See more details from my code below:
Login.js
Ext.define('TutorialApp.view.login.Login', {
extend:'Ext.window.Window',
xtype: 'login',
requires: [
'TutorialApp.view.login.LoginController',
'TutorialApp.view.registration.RegisterForm',
'Ext.form.Panel'
],
controller: 'login',
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
},{
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
},{
xtype: 'displayfield',
hideEmptyLabe: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
},{
text: 'Register',
formBind: false,
listeners: {
click: 'onRegisterClick'
}
}
]
}
});
LoginController.js
Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function() {
localStorage.setItem("TutorialLoggedIn", true);
this.getView().destroy();
Ext.create({
xtype: 'app-main'
});
},
onRegisterClick: function() {
this.getView().destroy(); //destroy login view
Ext.create({
xtype: 'form-register'
});
//above code does not create a component for register
}
});
RegisterForm.js
Ext.define('TutorialApp.view.registration.RegisterForm', {
extend: 'Ext.form.Panel',
xtype: 'form-register',
frame: true,
title: 'Register',
bodyPadding: 10,
scrollable:true,
width: 355,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 115,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'User Info',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [
{ allowBlank:false, fieldLabel: 'User ID', name: 'user', emptyText: 'user id' },
{ allowBlank:false, fieldLabel: 'Password', name: 'pass', emptyText: 'password', inputType: 'password' },
{ allowBlank:false, fieldLabel: 'Verify', name: 'pass', emptyText: 'password', inputType: 'password' }
]
}, {
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: {
type: 'states'
},
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: 'Register',
disabled: true,
formBind: true
}]
});
Any idea how this should work? I tried including the 'plugins: 'viewport'' in the registerform.js and it shows the registration form but I don't think it the correct to load the component for the registration form. Any advice is greatly appreciated. Thank you.

Any advice is greatly appreciated so I think you can use card layout.
CARD layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
I have created an sencha fiddle demo. this will show how card layout is working. I hope this will help you to achieve your requirement.
//Controller
Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function () {
localStorage.setItem("TutorialLoggedIn", true);
Ext.Msg.alert('Success', 'Good you have successfully login!');
},
onRegisterClick: function (button) {
var mainCard = this.getView().up('#mainCard');
this.getView().destroy(); //destroy login view
//This code create a component for register and set on card view
mainCard.getLayout().setActiveItem(Ext.create({
xtype: button.view
}));
},
onBackButton: function (button) {
var mainCard = this.getView().up('#mainCard');
this.getView().destroy(); //destroy register view
//This code create a component for login and set on card view
mainCard.getLayout().setActiveItem(Ext.create({
xtype: button.view
}));
}
});
//Login form
Ext.define('TutorialApp.view.login.Login', {
extend: 'Ext.form.Panel',
xtype: 'login',
height: 200,
requires: [
'TutorialApp.view.login.LoginController',
'TutorialApp.view.registration.RegisterForm',
'Ext.form.Panel'
],
controller: 'login',
bodyPadding: 10,
title: 'Login Form',
items: {
xtype: 'form',
bodyPadding: 10,
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabe: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
handler: 'onLoginClick'
}, {
text: 'Register',
view: 'form-register',
handler: 'onRegisterClick'
}]
}
});
//RegisterForm
Ext.define('TutorialApp.view.registration.RegisterForm', {
extend: 'Ext.form.Panel',
xtype: 'form-register',
controller: 'login',
frame: true,
title: 'Register',
bodyPadding: 10,
width: '100%',
height:370,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 115,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'User Info',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'user id'
}, {
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'password',
inputType: 'password'
}, {
allowBlank: false,
fieldLabel: 'Verify',
name: 'pass',
emptyText: 'password',
inputType: 'password'
}]
}, {
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
}),
valueField: 'abbr',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: 'back',
view: 'login',
handler: 'onBackButton'
}, {
text: 'Sumbit',
disabled: true,
formBind: true
}]
});
Ext.create('Ext.container.Container', {
layout: 'card',
itemId: 'mainCard',
widht: '100%',
height: '100%',
items: [{
xtype: 'login'
}],
renderTo: Ext.getBody()
});

EXT JS: How to load selected grid row into window?

User Form
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
dockedItems: [{
xtype:'toolbar',
dock: 'bottom',
items:[{
iconCls: 'icon-user-add',
text: 'Add',
scope: this,
itemId: 'addButton'
},{
iconCls: 'icon-reset',
itemId:'resetButton',
text: 'Reset',
scope: this
},{
iconCls: 'icon-save',
itemId: 'savebutton',
text: 'Save',
disabled: true,
scope: this
}]
}]
});
This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window?
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
columns: [{
text: 'Name',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'name'
},{
text: 'Age',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'age'
},{
text: 'Phone Number',
sortable: false,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'phnumber'
}]
});
Thanks in advance!

you need to add refs to window objects
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
ref : '../name'
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false,
ref : '../age'
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false',
ref : '../phnumber'
}],
and set data to them when you show window.
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.name = record.get('name');
win.age = record.get('age');
win.prohne = record.get('phone');
win.show();
}

Add a form property to Grid as a reference to form, and also a showForm() function that when a user click on Add or dblClick on row's grid, you call it with id of selected row or null(when click add). showForm() checks the form reference, if it's null, create an instance of form and call this.form.loadFormData(id)
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
form:null,
showForm:function(id){
if(!form) this.form = new Patients.view.Form();
this.form.loadFormData(id);
},
//columns:....
and in form in loadFormData() you make a decision depend on id. if it is null create an instance of Model and load it, else retrieve record(with all your desire fields) and load it.
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
// docked items and else...
loadFormData:function(id){
var me = this.
if(!id){
var record = new Patients.model.User();
this.loadRecord(record);
}
else{
var record = Patients.model.User.load(id,{
callback:function(record){
me.loadRecord(record);
var win = Ext.view.Window({
items:[me],
});
win.show();
}
}
}
}
Ext.data.Model.load() is static method.
Finally you create a window and add the form to it and call show()

By selecting first combobox the remaining values should be displayed

By selecting first extjs combo box, the remaining values should be displayed in the form.
I am creating an Address book application using Extjs.
By selecting first combobox the remaining values should be displayed in below form.
Below is the code:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{name:'id', type: 'int'},
{name: 'FirstName', type: 'string'},
{name: 'EmailAddress', type: 'string'}]
});
user : [{"FirstName": "sssss", "EmailAddress": "bbb#gmail.com}, {"FirstName": "bbbb", "EmailAddress": "aaa#gmail.com"}]
By selecting FirstName from combobox EmailAddress should be displayed in the below textfield.
var cntry_panel = new Ext.Panel({
header: false,
id: 'org-main',
layout: 'form',
labelWidth: 200,
border: false,
bodyStyle: 'padding:15px',
title: 'Select Country And State',
labelAlign: "right",
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
fieldLabel: 'First Name',
id: 'Name',
store: user,
displayField: 'FirstName',
mode: 'remote',
width: 260,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select FirstName...',
}, {
xtype: 'combo',
fieldLabel: 'Email Address',
store: user,
mode: 'local',
width: 150,
forceSelection: true,
triggerAction: 'all',
selectOnFocus: true
}]
});

First, your field for email address should probably be a textfield, unless you have a list of values that you are using for that field as a combo.
Next, give your Email field an itemId property, like emailField, for easy access.
Then, in your config for the First Name field, add a listener for the select event:
{
xtype: 'combo',
fieldLabel: 'First Name',
//...other properties...
listeners: {
select: function(combo, records) {
combo.up('#org-main').down('#emailField').setValue(records[0].get('email'));
}
}
}
You should really check out the docs for events on Ext.form.field.ComboBox, this is a pretty common operation that will be important to understand if you will be using a lot of ExtJS. http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox

File upload ExtJS 4

I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo &egrave obbligatorio!',
typeAhead: true,
selectOnFocus: true,
anchor: '100%',
buttonText: 'Allega'
}
When I load the file, I want to save it in db. The field does not belong to a form and, therefore, I can not do the submit. How can I do?

You can create a dummy form (without even displaying it). Something like
var f = Ext.create('Ext.form.Panel', {
items: [ your filefield item ]
})
And then do submit.

items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
Live demo is here