I am working in extjs4. I have view with following components-
1. xtype: 'boxselect',
displayField: 'emailAddress',
valueField: 'id',
store : store
2.xtype : 'grid',
selModel:Ext.create('Ext.selection.CheckboxModel', {
headerWidth : 40,
showHeaderCheckbox : false,
ignoreRightMouseSelection : true,
checkOnly : true
}),
width :350,
border : true,
store : store,
columns : [{
dataindex : 'firstName',
header : 'firstName'
},{
dataindex : 'lastName',
header : 'lastName'
},{
dataIndex : 'emailAddress',
header : 'email'
}]
3.xtype : 'button',
text : 'Add'
On this add button click, i want to add grid selected multiple values to boxselect's selected values along with its previous selected values and want to show those values in combobox as selected.
i tried it as=
var previousvalues = [12,13,14]
var newvalues = [15,16]
Ext.getCmp('comboId').setValue(previousvalues + newvalues );
But its forming combinely one emailId and setting it as one value, not individual emailId
So how to perform this in extjs4
You can not contact two arrays with + operator in javascript.
ExtJs framework has build in function for merging two arrays Ext.Array.merge()
So you can set new values like this:
var values = Ext.Array.merge( previousvalues, newvalues );
Ext.getCmp('comboId').setValue( values );
Related
I have a form with two input fields 'test1' and 'test2' and one combo box. I want to validate this form, the input fields should be not emtpy. I use therefore the config ' allowBlank: false' and the controller method 'onFormValidityChanged'. This works fine.
Now I hide the input field 'test2' when I change the value in the combo box with the controller method 'onChangeCombo' dynamically. Also, I set config ' allowBlank: true' of input field 'test2'. But my form is not valid when the hidden input field 'test2' is empty.
How can I exclude the hidden input field from the validity check?
I use the ExtJS version 6.6.
Thank you for your hints, Thomas
View:
items : [{
xtype : ' formpanel',
trackResetOnLoad : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : ' textfield',
name : 'test1'
itemId : 'test1',
allowBlank : false,
fieldLabel : 'test1'
},
{
xtype : ' combobox',
name : 'combo',
itemId : 'combo',
store: myStore,
listeners : {
change : 'onChangeCombo'
}
},
{
xtype : ' textfield',
name : 'test2'
itemId : 'test2',
allowBlank : false,
fieldLabel : 'test2'
}],
listeners : {
validitychange : 'onFormValidityChanged'
}
}];
Controller:
onFormValidityChanged : function(form, valid) {
var win, button;
win = form.owner.up('window');
button = win.down('[xtype=button]');
button.setDisabled(!valid);
},
onChangeCombo : function(combobox) {
var win, test2;
win = combobox.up('window');
test2 = win.down('textfield[itemId=test2]');
test2.hide();
test2.allowBlank = true;
}
to turn off the validation, just disable this hidden input.
test2.disable();
I have a suggestion for You too:
use test2.setAllowBlank(true) instead of test2.allowBlank = true
don't use reference like win.down(etc.), check out the ViewController options with reference and lookup method
Norbeq's proposal
test2.disable()
get not provide a solution. I don't know why...
I did not follow the dh117's formBind suggestion.
I solved this problem as follows:
test2 = win('textfield[itemId=test2]');
win.remove(test2);
Thank you for your hints, also for the further hints,
Thomas
For example, I have textfield with input type 'email'. I have set the default color of the field to pink. if the input is in a proper email format, i want the textfield's color to be changed to white. how do i do that?
the eg code:
xtype: 'textfield',
labelWidth : 250,
fieldStyle: 'background-color : #F5A9A9',
vtype : 'email',
fieldLabel: 'email address'
In this case first we need to check weather input value is an email or not. For that we are using
var fieldValidation = Ext.form.field.VTypes.email(val);
If fieldValidation is true then it input value is an email. Once we verified input value simply we change our background color. this.setFieldStyle("background-color : #FFFFFF")
Your code will like :
{
xtype: 'textfield',
fieldStyle: 'background-color : #F5A9A9',
vtype : 'email',
fieldLabel: 'email address',
validator : function(val){
var fieldValidation = Ext.form.field.VTypes.email(val);
if(fieldValidation == true){
this.setFieldStyle("background-color : #FFFFFF");
}
}
}
I created a fiddle for you. Please have a look. Working Fiddle.
Also I am attaching doc of Vtype for you which help you understand properly. Doc
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Cascading Combobox in extjs
Hi I have two comboboxes ,viz..
AcademicClass
{
xtype : 'combobox',
emptyText : 'Academic Class',
displayField : 'name',
id:'comboacademicclass',
valueField : 'id',
store:classstore,
triggerAction:'all',
mode:'local',
listeners : {
'select' : {
fn: function(combo1, value) {
var comboSubject=Ext.getCmp('combo-subject');
var classId=Ext.getCmp('comboacademicclass').getValue();
comboSubject.setDisabled(true);
comboSubject.setValue('');
comboSubject.getStore().removeAll(true);
comboSubject.getStore().load({url:'http://localhost:8080/WebService/rest/type/academicSubjectByClass/'+classId+'.json'});
// Using this loading data in second combobox by passing first combobox Id.:- 'classId'.
comboSubject.setDisabled(false);
}
}
}
}
AcademicSubject:
{
xtype : 'combobox',
emptyText : 'Academic Subject',
id:'combo-subject',
displayField : 'name',
valueField : 'id',
disabled:true,
store:subjectstore,
triggerAction:'all',
mode:'local'
,lastQuery:''
}
Its showing output only first time selection but on second time selection its just showing "Loading" and not dispalying output. Please Help.
Well you should listen with the AcademicSubject combo on the AcademicClass for the select or the change event and activate the listening combo along with it. You will also get the selected value and can so prepare the query for the activate combo. You could do this like
combobox.queryData = [{ property: 'fieldName', value: value}];
combobox.reset();
combobox.doQuery(combobox.queryData);
where combobox is a reference to the activated combo (AcademicSubject ) and value a propertyvalue from the AcademicClass combo. To ensure the use of your new query use
combobox.on('beforequery', function (e) {
e.query = e.combo.queryData;
});
Please note:
For the snippets above I recommend to use queryParam: 'filter' which would enable you to use default serverside filter behavior without the need to introduce a new param.
I have to fill values in the right multiselect box in an itemselector. First i need to keep it blank and then on selection of an item in the combo box above it, i have to fill values accordingly. I have tried this and its crashing at the moment and nothing seems wrong. Here is the code snippet:
var userList = GetUserList();
var aoiList = GetAOIList();
var userAOIs = "";
var selectedUser="";
var userStore = new Ext.data.ArrayStore({
fields: ['user'],
data: userList
});
var aoiStore = new Ext.data.ArrayStore({
fields: ['aoiList'],
data: aoiList
});
var userAOIStore = new Ext.data.ArrayStore({
fields: ['userAOIs'],
data: userAOIs
});
var aafp = new Ext.FormPanel({
width : 350,
frame : true,
autoHeight : true,
bodyStyle : 'padding: 2px 5px 0 2px;',
labelWidth : 100,
defaults : {
anchor : '95%',
allowBlank : false,
msgTarget : 'under'
},
items : [ {
xtype : 'combo',
fieldLabel : 'Choose User',
emptyText: "Select User...",
id : 'userId',
name : 'user',
multiSelect: false,
store: userStore,
displayField: 'user',
mode: 'local',
editable: false,
typeAhead: true,
triggerAction: 'all',
listeners:{select:{fn:function(combo, value) {
selectedUser = value.get('user');
userAOIs = myAOIs(selectedUser);
userAOIStore = new Ext.data.ArrayStore({
fields: ['userAOIs'],
data: userAOIs});
aafp.getForm().findField("itemselector").reset();
}}
},
value : selectedUser
},{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'AOISelector',
imagePath: 'ext-3.4.0/examples/ux/images/',
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
multiselects: [{
width: 250,
height: 200,
store: aoiStore,
displayField: 'aoiList'
},{
width: 250,
height: 200,
store: userAOIStore,
displayField: 'userAOIs',
valueField: 'userAOIs'
}]
}]
Initially i doubted the "aafp.getForm().findField("itemselector").reset()" call and thought that there might be some other function to dynamically reload the elements in the form, instead of reset which might be used to reset/erase the data in the fields but reset is reloading the contents.
Please provide your inputs how this could be achieved?
Thanks
You can try this:
1) Create the stores.
2) Add the stores to the components
3) When the listener 'selected' is fired get the component who store you would like to dynamical add to and create a new record and add it to the store.
EDIT:
Try something like this (its what I think you want) note the code isn't exact since I'm not sure what exactly you want to do but it should give you an idea of what you need to do.
listeners:{select:{fn:function(combo, value) {
var selectedUser = value.get('user');
var record = Ext.data.Record.create([
'user' : selectedUser
]);
var cmp = Ext.getCmp('compId');//Get the comp that contains the store you want to add to put the cmp id here to look it up
cmp.store.removeAll();//Clear the store
cmp.store.add([record]);//Add the new record into the store
}, this}
Thanks for your inputs, it was helpful.
I found the problem: I was creating a new instance of Ext.data.ArrayStore but the view was linked to the previous instance.
So i used the previous instance, removed everything from it and added new records, jus as theboulderer suggested. But I found that we don't have to catch the handle of itemselector store, it was automatically updated with the modified store.
sample:
var tempUserAOIStore = new Ext.data.ArrayStore({
fields: ['userAOIs'],
data: [['8'], ['9']]
});
userAOIStore.removeAll();
userAOIStore.add(tempUserAOIStore.getAt(0));
userAOIStore.add(tempUserAOIStore.getAt(1));
Now this facility in ArrayStore is also a problem for me as the stores are so tightly binded that if i want to keep the original in some temp store, it is also modified. i.e.
if i do :
B = A;
Itemselector: store = A
A.remove(some records)
I find that B is also modified as A is modified. I am answering here so guess have to post this as a seperate question
When I create two window objects containing single textfield object in each window. But Id of that text field is same. When I re-size, maximize or minimize window object, controls move from one window to another.
Please have a look on the following code and re-size first window titled : 'window 1'
Ext.onReady(function(){
var win = new Ext.Window({
title : 'window 1',
width:200,
height:200,
maximizable : true,
x : 50,
items: [{xtype : 'textfield', id: 'text1'}]
});
win.show(this);
var win2 = new Ext.Window({
title : 'window 2',
width:200,
height:200,
maximizable : true,
x : 350,
items: [{xtype : 'textfield', id: 'text1'}]
});
win2.show(this);
});
As for HTML, each id must be unique. Otherwise, you will have stranges behaviour.
Indeed, the Ext.get method has a cache, based on the element id.
So the real question is : why do you set the same id to the text fields ?
If you need a known id, you can use :
tId = Ext.id(); // generates an id
items: [{xtype : 'textfield', id: tId}]
Or to access the textfield element / component later, you can use ref or itemId : http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component