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
Related
As I am a newbie to Ext JS and Sencha Architect, I am a but struggling here :(
I have one grid whihc shows two columns ID and Name as follow
ID | Name
1000 CA
1001 TX
1002 VA
There are two buttons Add & Update.
Code of the grid is as follow:
items: [
{
xtype: 'panel',
scrollable: true,
title: 'Plant',
dockedItems: [
{
xtype: 'gridpanel',
buttons: [
{
text: 'Add Plant',
handler: function() {
});
}
},
{
text: 'Update Plant',
handler: function() {
Ext.create('XYZ.view.UpdatePlantWindow', {
title: 'Update Plant'});}
}
],
buttonAlign: 'center',
dock: 'top',
id: 'PlantGrid',
scrollable: true,
store: 'PlantStoreAdmin',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID_PLANT',
text: 'Plant ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'DS_PLANT',
text: 'Plant Name',
flex: 1
},
Now when user selects any row and clicks on Update Button, new window opens which has two text fields ID and Name. I want to populate these two fields with appropriate values that user has selected in the grid.
Code of windows:
Ext.define('XYZ.view.UpdatePlantWindow', {
extend: 'Ext.window.Window',
alias: 'widget.updateplantwindow',
requires: [
'Cepheid.view.UpdatePlantWindowViewModel',
'Ext.container.Container',
'Ext.form.field.Text'
],
viewModel: {
type: 'updateplantwindow'
},
autoShow: true,
height: 250,
width: 400,
title: 'Update Plant',
items: [
{
xtype: 'container'
},
{
xtype: 'textfield',
disabled: true,
id: 'PlantIDUpdate',
fieldLabel: 'Plant ID'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
id: 'PlantNameUpdate'
}
]
});
Now how do I populate both the text fields with appropriate values?
Thanks in advance !
You can use the SelectionModel to get the currently selected record(s) in the grid. ie:
var selection = myGrid.getSelectionModel().getSelection();
And i'd recommend wrapping the fields in your window in a form because then you could use the loadRecord method to push the selection values to the form.
ie.
myWindow.down('form').getForm().loadRecord(selection[0]);
otherwise, if you don't want to wrap in the form you could load each individual value on the window:
myWindow.down('#myField').setValue(selection[0].get('my_value'));
Here is a fiddle demonstrating a working example
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()
I added some fields in an ext js form with required 'itemCls'. But the form submitting without checking (mandatory fields) the fields null or not.
My code is given below,
xtype: 'form',
id: 'form',
bodyStyle: 'overflow : auto; height: 337px;',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'combo',
id: 'adr',
anchor: '98%',
listWidth: 300,
itemCls: 'required',
editable: false,
store: store,
displayField: 'NAM',
valueField: 'ID',
triggerAction: 'all',
mode: 'local'
}, {
xtype: 'datefield',
id: 'date',
name: 'date',
itemCls: 'required',
readOnly: false,
}, {
xtype: 'textfield',
id: 'name',
itemCls: 'required',
anchor: '98%',
fieldLabel: 'name',
name: 'name'
}]
}, {
xtype: 'button',
text: 'Save',
handler: function(btn, evt) {
Ext.getCmp('form').getForm().submit();
}
}]
Any help is must appreciated..
You have to add monitorValid: true to form. Then you can use listener clientvalidation on form, for exmaple, to disable submit button
listeners: {
clientvalidation : function(form, valid) {
Ext.getCmp('button-save').setDisabled(!valid);
}
}
After that client validation will work as expected. NOTE: button-save is id which should be on Save button.
I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo è 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
I have a combo B that gets loaded by other combo A (triggered by 'select' listener)
once B is populated, I see all items but now from drop-down in Combo B,
I'm force to select the first item with mouse
I can select other item only by typing
Please help!!!!
code for Combo A
{
xtype: 'combo',
displayField: 'value',
emptyText: 'Please select A first',
fieldLabel: 'Combo A',
id: 'comboA',
maxHeight: 240,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
typeAheadDelay: 100,
valueField: 'id',
store: new Ext.data.JsonStore({
url: '/cgi-bin/server.cgi',
fields: ['id', 'name'],
baseParams: {
action: 'getAList'
},
autoLoad: true,
root: 'aList'
}),
listeners: {
'select': {
fn: function(){
var comboB = Ext.getCmp('comboB');
comboB.clearValue();
comboB.store.removeAll();
comboB.store.reload({
params: {
id: this.getValue()
}
})
}
}
}
}
Code for combo B:
{
xtype: 'combo',
displayField: 'item',
editable: true,
emptyText: 'Select a Combo A first',
fieldLabel: 'Combo B',
id: 'comboB',
lazyInit: true,
maxHeight: 240,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
valueField: 'id',
width: 220,
store: new Ext.data.JsonStore({
url: '/cgi-bin/server.cgi',
root: 'bList',
autoLoad: false,
fields: ['id,', 'item'],
baseParams: {
action: 'getBList'
},
listeners: {
'beforeload': function(){
Ext.getCmp('comboB').disable();
},
'load': function(){
Ext.getCmp('comboB').enable();
}
}
})
}
Not sure what exactly is wrong here but I suspect this piece in your comboA is not getting fired as expected -
comboB.store.reload({
params: {
id: this.getValue()
}
})
So comboB is still disabled. when you click on the comboB trigger, it loads the store and the comboB's store's load listener is kicking in as expected to enable the combo.
Try putting some debug statements or stepping through the piece of code above.