I have a grid that when is clicked change the property cellwrap from false to true
onCellClick: function(view, td, index, record, tr, rindex) {
var
me = this,
vm = me.getViewModel(),
field = me.lookupReference('descriptionField');
field.cellWrap = true;
field.getView().getStore().getSource().reload();
}
But i guess im making it wrong. Can i reload the grid with the cellwrap propertie change? Im using the v7.5.1.20
cellWrap is a configuration of an Ext.grid.column.Column. You can't simply change it after the grid is rendered, you need to use the reconfigure method of Ext.grid.Panel to update the columns and set cellWrap to true.
You can try this code in a Sencha Fiddle (ExtJS 7.4.0 modern material), click anywhere and see how the top left cell is changing:
Ext.application({
name: 'Fiddle',
launch: function () {
const store = new Ext.data.Store({
fields: ['name', 'phone'],
data: [{
name: 'Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1',
phone: 111
}, {
name: 'Name2',
phone: 222
}, {
name: 'Name3',
phone: 333
}, {
name: 'Name4',
phone: 444
}, {
name: 'Name5',
phone: 555
}]
})
const myGrid = Ext.create({
renderTo: Ext.getBody(),
xtype: 'grid',
store: store,
selModel: 'cellmodel',
columns: [{
text: 'Name',
dataIndex: 'name',
cellWrap: false
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
myGrid.reconfigure(null, [{
text: 'Name',
dataIndex: 'name',
cellWrap: true
}, {
text: 'Phone',
dataIndex: 'phone'
}]);
}
}
});
}
});
Related
In the window for creating and editing records, I have a combobox type field
Ext.define('BookApp.view.Book', {
extend: 'Ext.window.Window',
alias: 'widget.bookwindow',
width : 450,
title: 'Book',
layout: 'fit',
autoShow: true,
modal : true,
initComponent: function() {
this.items = [{
xtype: 'form',
items: [
{
xtype: 'combobox',
fieldLabel: 'Status',
name: 'status',
store: Ext.data.StoreManager.lookup('Statuses'),
valueField: 'id',
displayField: 'name',
typeAhead: true,
queryMode: 'remote'
},
...............
Store Statuses gives records from the table with the fields: id, name, order_install, where order_install is the order of the status.
Table Statuses
id name order_install
23 New 1
24 In Work 2
29 Postponed 3
34 Shipped 4
31 In_transit 5
How to make that the choice of a value from the status list was limited to only one value up or down according to the order_install field?
For example: If the status of In Work, then only the statuses Postponed and New were available for selection
Solution:
Use store filterBy() method with custom filtering function.
Because your id values are random, you have to get the internal position of record in store to find the prior and next record.
In the next examples filterCombo() is the function, that filters the store. This function is used in combobox select event. You can use it where you want. There are differences between ExtJS 4 and ExtJS 6 version, so there are two examples:
ExtJS 4:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});
function filterCombo(combobox, index) {
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.index == index - 1) || (record.index == index) || (record.index == index + 1)) {
return true;
} else {
return false;
}
}
);
};
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose items',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
multiSelect: false,
renderTo: Ext.getBody(),
value: 'In Work',
listeners: {
'select': function (combo, records) {
index = records[0].index;
filterCombo(combo, index);
},
'render': function (combo) {
index = combo.store.find('name', combo.getValue());
filterCombo(combo, index);
}
}
});
});
ExtJS 6:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});
function filterCombo(combobox, index) {
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.internalId == index - 1) || (record.internalId == index) || (record.internalId == index + 1)) {
return true;
} else {
return false;
}
}
);
};
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose items',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
value: '24', // Equals to "In Work"
multiSelect: false,
renderTo: Ext.getBody(),
listeners: {
'select': function (combo, records) {
index = records.internalId;
filterCombo(combo, index);
},
'render': function (combo) {
index = combo.getSelection().internalId;
filterCombo(combo, index);
}
}
});
}
});
So i have two solutions, one to prevent selecting the combo item(but it will remain visible) and the other to hide the values you don't want to be selected(using store filters).
1) FIDDLE: beforeselect
2) FIDDLE: filterBy
I'm new to Ext JS and have noticed two ways in which a grid / tree can bind to a data source (Store):
Ext.data.StoreManager.lookup('someStoreId');
Ext.getStore('someStoreId');
Is Ext.getStore just some shorthand for StoreManager.lookup? Is there a performance difference between the two or would it be considered best practice to use one over the other?
Yes they are the same thing, it doesn't matter which one you call, getStore is for typing convenience and it calls StoreManager.
http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext-method-getStore
Shortcut to Ext.data.StoreManager.lookup.
And they are both horrible ideas. You are basically creating global variables. You should prefer passing references to stores you create instead.
Take their grid example:
Ext.create('Ext.data.Store', {
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
It can be rewritten so that the store is not globally reachable, since the store manager is a global singleton.
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Store of the selectfield contains same word with different case like Ed & ed.When we select ed,In the picker it is showing Ed.
Code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField:'firstName',
valueField:'firstName',
store:Ext.create("Ext.data.Store", {
fields: [
{name: 'firstName', type: 'string'},
],
data : [
{firstName: "Ed"},
{firstName: "ed"},
{firstName: "Tommy"},
{firstName: "Aaron"},
{firstName: "Jamie"}
]
})
}
]
}
]
});
Fiddle for the problem
In Sencha, the selectfield is somethings whose value doesn't distinguish between the caps and small letter. So, it has provided valuefield. If you create your store like this below, you will get the expected result:
store: Ext.create("Ext.data.Store", {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'value',
type: 'string'
}],
data: [{
firstName: "Ed",
value: 'edCaps'
}, {
firstName: "ed",
value: 'edSmall'
}, {
firstName: "Tommy",
value: 'tommy'
}, {
firstName: "Aaron",
value: 'aaron'
}, {
firstName: "Jamie",
value: 'jamie'
}]
})
Here is fiddle also. Happy coding! :)
I created a comboBox and when I select a value, no value will be displayed.
Ext.create("Ext.form.field.ComboBox", {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
displayField:"value",
valueField:"value",
flex: 1,
store:Ext.create("Ext.data.Store",{
fields: ['key', 'value'],
data: [
{ key: "10",value: "etap 0"},
{ key: "200",value: "etape 1"},
{ key: "300", value: "etape 3"}
]
}),
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
})
EDIT
Here is exactly the method that return combo:
drawField: function (el) {
var me = this;
var uiField = Ext.create(me.componentType, {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
flex: 1,
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
});
if (el.parameterType.isCombo) {
uiField.displayField = 'value';
uiField.valueField = 'key';
uiField.editable = false;
uiField.store = Ext.create('Ext.data.Store', {
fields: ['key', 'value'],
data: el.parameterType.values
});
}
return uiField;
}
and el parameter is a JavaScript object like that:
{
name: "",
labelId: "Champ :",
parameterType: {
regEx: "^.*$",
errID: "115",
isCombo: true,
values:[
{key: "10", value: "etap 0"},
{key: "200",value: "etape 1"},
{key: "300",value: "etape 3"},
],
selectedValue: "etap 0"
},
mandatory: false,
visible: true,
defaultValue: "",
elementType: "LIST_BOX",
regExErrMsg: "Valeur invalide.",
requiredErrMsg: ""
}
and me.componentType at runtime is Ext.form.field.ComboBox
This fiddle works fine for me, I removed the references to el as it shown undefined for me and also changed Ext.data.store to Ext.data.Store
https://fiddle.sencha.com/#fiddle/jj6
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.form.field.ComboBox", {
renderTo: Ext.getBody(),
displayField: "value",
valueField: "value",
flex: 1,
store: Ext.create("Ext.data.Store", {
fields: ['key', 'value'],
data: [{
key: "10",
value: "etap 0"
}, {
key: "200",
value: "etape 1"
}, {
key: "300",
value: "etape 3"
}]
})
});
}
});
valueField:"value" is wrong, you should specify valueField:"key" in order for ComboBox to work properly
how I can automaticly pickup a name from radiogroup and pass it to radio element:
xtype: 'radiogroup',
fieldLabel: 'Is Sale scheduled',
name: 'SaleScheduled',
items: [
{ boxLabel: 'Yes', name: 'SaleScheduled', inputValue: 'YES' },
{ boxLabel: 'No', name: 'SaleScheduled', inputValue: 'NO' }
],
....
I tryed to use name: this.getName() or this.findParentByType ('radiogroup')
I try to created extended radiogroup element that will have to chooses Yes or No and I can have it defined as xtype
If I understand you right, you're looking for a YesNoRadioGroup which passes its name onto its child elements:
Ext.ns('Ext.ux');
Ext.ux.YesNoGroup = Ext.extend(Ext.form.RadioGroup, {
constructor: function(cfg) {
cfg = cfg || {};
cfg.items = [
{ boxLabel: 'Yes', name: cfg.name, inputValue: 'YES' },
{ boxLabel: 'No', name: cfg.name, inputValue: 'NO' }
];
Ext.ux.YesNoGroup.superclass.constructor.call(this, cfg);
}
});
Ext.reg('yes-no-group', Ext.ux.YesNoGroup);
Alternatively you could do the same as above but add an addItem function which does similar work if you want more flexibility.