How to set value for input 'textfield' with JavaScript - javascript

i have a method in my openDB.js logic class:
getUserByUsername: function(username) {
return this.getUsers(username).then(function(users) {
return users[ username ];
});
},
i'm getting there user with a lot of properties/values.
i have a extjs input 'textfield', and i want to get in 'value' of textfield some user information.
i know that all follow parameters has values (it is codesnippet from openDB.js CreateUser function):
.addParameter("DEPARTMENT", user.department)
.addParameter("FAX", user.fax)
.addParameter("FIRSTNAME", user.firstName)
.addParameter("FUNCTION", user["function"])
.addParameter("LASTNAME", user.lastName)
.addParameter("LOCATION", user.location)
.addParameter("MAIL", user.mail)
.addParameter("MOBILE", user.mobile)
.addParameter("PASSWORD", user.password)
i know it because its possible to check it with setTitle like this:
openDB.getUserByUsername(user.username).then(function(userDetails)
{
debugger;
me.setTitle("Welcome " + userDetails.department + "!");
});
its works fine with all properties.
but how to do it with 'textfield' value ????
items: [{
xtype: "form",
bodyPadding: 5,
border: false,
defaults: {
xtype: "textfield",
inputType: "text",
anchor: "100%"
},
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}, {
fieldLabel: 'E-Mail:',
id: 'email',
value: 'user.email',
name: "email"
}, {

Use the getValue method on the field.
var f = new Ext.form.field.Text({
renderTo: document.body,
value: 'foo'
});
console.log(f.getValue());

after couple hours of Fitign with that -> BEST SOLUTION EVER:
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}]
...
var name = Ext.getCmp('firstName').setValue('JohnRambo');

Related

How to read values from multiselector component

I am trying to use multiselector from EXTJS 6.5.2
This is the code that I am using to create multiselector with the values that I need
{
xtype: 'multiselector',
title: 'I caktohet:',
name: 'Caktohen[]',
bind: '{userfullname.value}',
fieldName: 'userfullname',
viewConfig: {
deferEmptyText: false,
emptyText: 'Askush i zgjedhur'
},
search: {
field: 'userfullname',
model: 'InTenders.model.UserModel',
store: {
type: 'users',
sorters: 'userfullname',
// proxy: {
// type: 'rest',
// limitParam: null,
// url: 'api/User'
// }
}
}
}
When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.
Anyone can help me or guide me how to get the values?
Thank you.
//Code that I'm trying to get multiselector items and save them
saveTenderForm: function (button, e, eOpts) {
var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array
var me = this,
win = button.up('window'),
form = win.down('form'),
// formApplyUpload = this.getFormApplyUpload(),
// var ko = win.items.items[0].items.items[0].value;
recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
// recordtenderUsers = form.getRecord();
// record = form.getRecord(),
values = form.getValues();
// appFile = this.getApplicationFile(),
// callbacks;
recordtenderUsers.set(values);
recordtenderUsers.set('tenderUsers',selectedUsers.items);
// // me.showMask();
// if (form.isValid()) {
recordtenderUsers.save({
success: function (recordtenderUsers, operation) {
win.close();
me.hideMask();
},
failure: function (recordtenderUsers, operation) {
me.hideMask();
}
});
You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().
In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'form',
renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Multi selector example',
fieldName: 'text',
viewConfig: {
deferEmptyText: false,
emptyText: 'No value selected'
},
search: {
field: 'text',
store: {
fields: [{
name: 'text',
type: 'string'
}],
data: [{
text: 'ABC'
}, {
text: 'ABC 1'
}, {
text: 'ABC 2 '
}, {
text: 'ABC 3'
}, {
text: 'ABC 4'
}]
}
}
}, {
xtype: 'button',
text: 'Get Value',
margin:15,
handler: function (btn) {
var multiselector = btn.up('form').down('multiselector');
if (multiselector.down('grid')) {
multiselector.down('grid').getSelection().forEach(rec => {
console.log(rec.get('text'));
});
}
}
}]
});
}
});

In Extjs grid On options select from combo box, it removes selection of all records from grid

On Combo select from options, it removes selection of all records from grid and even it removes selection of current record also when you finish your editing.
Select all row from table.
click on last column cell, it will show you combo box to edit cell and at same time all other records get deselected this is one issue.
Now select value from combo box and click on any other record or somewhere, you'll notice that edited row also get deselected
I'm using 4.1.* Extjs and i have tried to override celledit plugin as well CheckboxModel.
Is there any way to keep records selected until and unless i'm not specifically deselect it from checkbox column.
Any help will be appreciated and thanks in advance
here is what I have done on the fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1u9i
Hey man I forked your fiddle and made some change that I think solve your problem:
https://fiddle.sencha.com/#view/editor&fiddle/27ua
Basically I added a viewConfig to the grid with a cellclick event listener. The cellclick event fires first; in the event handler we check the value of the cellIndex parameter in order to determine which grid column was clicked to fire the event. We then set the value of our flag variable to the cellIndex value, so we can access that value in the beforedeselect event handler of the selection model. Finally we return false from the beforedeselectif the value of the flag is anything other than 0.
Here's the code:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'region'],
data: [{
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Arizona'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alabama'
}]
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
var targetedCell = -1;
Ext.create('Ext.grid.Panel', {
id: 'theGrid',
viewConfig: {
listeners: {
cellclick: function(view, cell, cellIdx, record, row, rowIdx, eOpts) {
targetedCell = cellIdx;
}
}
},
title: 'data',
store: store,
width: 400,
renderTo: Ext.getBody(),
selModel: new Ext.selection.CheckboxModel({
checkOnly: true,
listeners: {
beforedeselect: function (thisSelModel, record, idx, eOpts) {
if(targetedCell != 0) {
return false;
}
return true;
}
}
}),
columns: [{
text: 'Name',
dataIndex: 'name',
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
}, {
text: 'State',
dataIndex: 'region',
editor: {
xtype: 'combo',
store: states,
displayField: 'name',
valueField: 'name',
listeners: {}
}
}],
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
}
});

Setting an extjs 6 combobox's store data at runtime results in display error

I've got a prototype of a combo box where I'm trying to set the store data at runtime.
When I try to do this, the menu under the combobox doesn't render (or it renders so small you can't actually see it). It's here on sencha fiddle:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var data = [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
];
var rates = Ext.create('ComboBoxRates');
rates.setData(data);
// Showing data is loaded into the store
console.group('directly from store instance');
rates.each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
// Showing that the data is definitely in the widget's store
console.group('from widget store');
panel.down('combobox').getStore().each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
}
});
I know the data is loaded into the combobox's store (open the console log in the fiddle) so I'm not sure why it's not rendering correctly.
I know this seems silly in this context, but the prototype is logic extracted out of a grid's widget column where each row has different store data.
I also built a one-step-back prototype with the same structure but the same data is inlined in the store's definition and that works:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ],
data: [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var rates = Ext.create('ComboBoxRates');
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
}
});
I thought an updateLayout would resolve the issue but it doesn't.
Is there something wrong with my code? Is there some way of setting a combobox's values at runtime?
You are missing queryMode, use queryMode: 'local' in the combo.
Working example: https://fiddle.sencha.com/#fiddle/10al

combobox should remember the last selection

Below is my code to display three comboboxes, which will be Filter by severity, start release and end release. When I refresh the page I want comboboxes to remember what was selected earlier. Now it shows the current release in both the comboboxes.
Any help on this
launch: function() {
var that = this;
this.down('#SevFilter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
itemId: 'severity',
model: 'Defect',
labelWidth: 117,
fieldLabel : 'Filter By Severity:',
field: 'Severity',
allEntryText: '-- ALL --',
allowNoEntry: true,
_insertNoEntry: function(){
var record;
var doesNotHaveAllEntry = this.store.count() < 1 || this.store.getAt(0).get(this.displayField) !== this.allEntrylText;
if (doesNotHaveAllEntry) {
record = Ext.create(this.store.model);
console.log("record value", record);
record.set(this.displayField, this.allEntryText);
record.set(this.valueField, "-1");
this.store.insert(0, record);
}
/*var doesNotHaveNoEntry = this.store.count() < 2 || this.store.getAt(1).get(this.displayField) !== this.noEntryText;
if (doesNotHaveNoEntry) {
record = Ext.create(this.store.model);
record.set(this.displayField, this.noEntryText);
record.set(this.valueField, null);
this.store.insert(1, record);
}*/
},
listeners: {
//ready: this._onSevComboBoxLoad,
select: this._onSevComboBoxSelect,
scope: this
}
});
var button = this.down('#goButton');
button.on('click', this.goClicked, this);
this.down('#SevFilter').add({
xtype: 'rallyreleasecombobox',
//multiSelect: true,
itemId: 'priorityComboBox',
fieldLabel: 'Release Start:',
model: 'release',
width: 400,
valueField: 'ReleaseStartDate',
displayField: 'Name',
// multiSelect: true,
//field: 'Name',
_removeFunction: function(){
console.log("this.store");
},
listeners: {
//select: this._onSelect,
select: this._onFirstReleaseSelect,
scope: this
}
});
this.down('#SevFilter').add({
xtype: 'rallyreleasecombobox',
itemId: 'priorityComboBox2',
fieldLabel: 'Release End:',
model: 'release',
//multiSelect: true,
stateId: 'rally.technicalservices.trend.defect.release',
stateful: true,
stateEvents: ['change'],
width: 400,
valueField: 'ReleaseDate',
displayField: 'Name',
listeners: {
change: function(box) {
var start_date = this.down('#priorityComboBox2').getDisplayField();
this.logger.log(start_date);
},
ready: this._removeFutureReleases,
select: this._onSecondReleaseSelect,
// ready: this._onLoad,
scope: this
},
});
},
In javascript you may use localstorage.
Here is an app example that retains State and Release selections in respective compboboxes when page is refreshed:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{html:'Select a Filter checkbox to filter the grid'},
{
xtype: 'container',
itemId: 'StateFilter'
},
{
xtype: 'container',
itemId: 'ReleaseFilter'
}
],
launch: function() {
document.body.style.cursor='default';
this._createFilterBox('State');
this._createFilterBox('Release');
},
_createFilterBox: function(property){
this.down('#'+property+'Filter').add({
xtype: 'checkbox',
cls: 'filter',
boxLabel: 'Filter table by '+property,
id: property+'Checkbox',
scope: this,
handler: this._setStorage
});
this.down('#'+property+'Filter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
id: property+'Combobox',
model: 'Defect',
field: property,
value: localStorage.getItem(property+'Filtervalue'), //setting default value
listeners: {
select: this._setStorage,
ready: this._setStorage,
scope: this
}
});
},
_setStorage: function() {
localStorage.setItem('StateFiltervalue',Ext.getCmp('StateCombobox').getValue());
localStorage.setItem('ReleaseFiltervalue',Ext.getCmp('ReleaseCombobox').getValue());
console.log('localStorage State: ', localStorage.StateFiltervalue,', localStorage Release:', localStorage.ReleaseFiltervalue);
this._getFilter();
},
_getFilter: function() {
var filter = Ext.create('Rally.data.wsapi.Filter',{property: 'Requirement', operator: '=', value: 'null'});
filter=this._checkFilterStatus('State',filter);
filter=this._checkFilterStatus('Release',filter);
if (this._myGrid === undefined) {
this._makeGrid(filter);
}
else{
this._myGrid.store.clearFilter(true);
this._myGrid.store.filter(filter);
}
},
_checkFilterStatus: function(property,filter){
if (Ext.getCmp(property+'Checkbox').getValue()) {
var filterString=Ext.getCmp(property+'Combobox').getValue()+'';
var filterArr=filterString.split(',');
var propertyFilter=Ext.create('Rally.data.wsapi.Filter',{property: property, operator: '=', value: filterArr[0]});
var i=1;
while (i < filterArr.length){
propertyFilter=propertyFilter.or({
property: property,
operator: '=',
value: filterArr[i]
});
i++;
}
filter=filter.and(propertyFilter);
}
return filter;
},
_makeGrid:function(filter){
this._myGrid = Ext.create('Rally.ui.grid.Grid', {
itemId:'defects-grid',
columnCfgs: [
'FormattedID',
'Name',
'State',
'Release'
],
context: this.getContext(),
storeConfig: {
model: 'defect',
context: this.context.getDataContext(),
filters: filter
}
});
this.add(this._myGrid);
}
});
The source is available here.
You could use Sencha localstorage proxy. This way you can keep consistency in your project and use a localstorage based store across all your code.
You can use stateful and stateId configurations to enable last selection. Here is an example of my code. Here what I am doing is to create a custom combobox that will show two options: Platform and program. Then for stateId, you can use any string that you want:
_createCategoryFilter: function()
{
// The data store containing the list of states
var platformTypeList = Ext.create('Ext.data.Store',
{
fields: ['abbr', 'name'],
data : [
{"abbr":"PLAN", "name":"Platform"},
{"abbr":"CURR", "name":"Program"},
//...
]
});
// Create the combo box, attached to the states data store
var platformTypeFilter = Ext.create('Ext.form.ComboBox',
{
fieldLabel: 'Select category',
store: platformTypeList,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
stateful: true,
stateId: 'categoryFilter',
listeners:
{
afterrender: function(param)
{
console.log('afterrender - category param is', param.rawValue);
CategoryFilterValue = param.rawValue;
LoadInformation();
},
select: function(param)
{
console.log('select - category param is', param.rawValue);
CategoryFilterValue = param.rawValue;
},
scope: this,
}
});
this.add(platformTypeFilter);
},

Items per page not taking an effect [Extjs]

I have wrote the extjs code for the pagination. It showed me all the data into grid but I set the itemsPerPage = 2. Here I used extjs with Grid + Panel. I think it is some minor mistake but I am new to extjs and all, so I cannot figured it out. I have tried but no luck so far.
Ext.onReady(function () {
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
autoLoad: false,
pageSize: itemsPerPage,
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}],
proxy: {
type: 'ajax',
url: 'example.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'blah',
totalProperty: 'total'
}
}
});
// specify segment of data you want to load using params
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title: 'Pagination',
store: store,
columns: [{
text: 'First Name',
dataIndex: 'firstname',
field: 'textfield',
flex : 1,
}, {
text: 'Last Name',
dataIndex: 'lastname',
flex : 1,
field:{
xtype:'textfield',
allowBlank:false
}
}],
id : 'SimpleGrid',
width: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
To use paging, pass the paging requirements to the server when the store is first loaded.
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: myPageSize,
// other params
foo: 'bar'
}
});
Here I used extjs + Grid + Panel.
Kind Regards,
If you look at the comment to url field:
proxy: {
...
url: 'example.json', // url that will load data with respect to start and limit params
...
}
extjs sends request to the server when it loads with all needed params. For example: example.json?start=0&limit=2&page=1
So you should limit it on the server and then send back to extjs
Here you can look at the working example, where limits was handled manually.
http://jsfiddle.net/jardalu/TE4ah/

Categories