I am trying to select the first row in a grid:
Ext.getCmp('myGrid').getSelectionModel.select(0);
I got an error saying select is undefined
but I can see the function exists.
I was using the ExtJS 4.2 version and I had no problem with that, now I am using the 6.5 version and I got that error.
What could be the problem here?
--EDIT--
Basically I have a function to create the store:
CreateDataStore: function (result, id) {
Ext.define('DDM', {
extend: 'Ext.data.Model',
fields: result.FieldColumns
});
var dataRecords = JSON.parse(result.Records);
return Ext.create('Ext.data.Store', {
id: id,
autoLoad: true,
model: 'DDM',
data: dataRecords,
remoteSort: false,
fields: result.Fields
});
}
And another function to assign the store to the grid and select the first row:
function BindDataGrid(result) {
gridStore = CreateDataStore(result, 'myGridStore');
Ext.getCmp('myGrid').reconfigure(gridStore);
if (Ext.getCmp('myGrid').getStore().getCount() > 0)
Ext.getCmp('myGrid').getSelectionModel().select(0);
}
Related
I want to hide a checkbox depending on wheter a record is phantom. Trying to implement this using viewmodels, but it doesn't seem to work.
See below for the related code. I've left out unrelated code for brevity.
The binding of the viewModel to the view is working as expected. When I try to bind activeRecord.name to the title attribute 2-way data binding is working correctly.
Viewmodel
Ext.define('MyApp.view.content.ContentViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.content',
data: {
activeRecord: null
}
});
Controller
var contentWindow = Ext.widget('content-details');
contentWindow.getViewModel().set('activeRecord', contentBlock);
View
viewmodel: 'content',
items: [
{
xtype: 'checkbox',
boxLabel: 'My checkbox',
bind: {
hidden: '{!activeRecord.phantom}'
}
}
]
We ended up using the following base class for a Model, which is more convenient rather than a formula in a ViewModel.
// Use your own name instead of BaseModel
Ext.define('BaseModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'phantom',
persist: false,
convert: function (v, rec) {
var id = rec.data[rec.idProperty];
return !id || (Ext.isString(id) && id.indexOf(rec.entityName) == 0);
}
}],
commit: function (silent, modifiedFieldNames) {
this.data.phantom = false;
this.callParent(arguments);
}
});
Then you'll be able to use the binding you want
bind: {
hidden: '{!activeRecord.phantom}'
}
Try to use formulas:
data: {
rec: null,
callback: null
},
formulas: {
isNew: function (get) {
return !get('rec') || get('rec').phantom;
}
}
Then in your view:
bind: {
disabled: '{!isNew}'
},
Ive checked the docs and cant seem to wrap my head around why the store.filter() works until I add a function to it and also the filterBy() fails.
I need the filter to check for 2 things from the record(s).
I need to check:
if(deviceMsgId == 1 || messageType == 'TEXT_MESSAGE')
Store:
var msgStore = Ext.create('p7_ui_static.store.DeviceMessageStore', {
id: 'messageLogStore',
storeId: storeId,
remoteFilter: false,
autoLoad:false,
...
...
});
Model:
Ext.define('p7_ui_static.model.DeviceMessage', {
extend: 'Ext.data.Model',
...
...
fields: [
{
name: 'deviceMessageTypeId'
},
{
name: 'messageType'
},
{
...
}
]
});
THIS FILTER WORKS ->
filter( filters, [value] )
msgStore.clearFilter(true);
msgStore.filter([
{ property: 'deviceMsgId', value : 1 }
]);
BUT THIS FILTER FAILS ->
filterBy( fn, [scope] )
msgStore.filterBy(function(record){
return record.get('deviceMsgId' == 1)
});
Here's an example of using filterBy.
msgStore.filterBy(function (record){
if ((record.get('deviceMsgId'))===1 ||
record.get('messageType')==='TEXT_MESSAGE'){
return true;
}
});
Also, as a bonus, you can easily filter a store by a property by the following code:
msgStore.filter('deviceMsgId',1);
Edit: After reviewing the documentation again, it looks like you are correct in returning true. If the function isn't being called, are there any errors being thrown in the console?
I'm just trying to create a custom ComboBox to reduce some boilerplate:
Ext.define('App.AutoComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.autocombobox',
states: null,
initComponent: function() {
this.callParent(arguments);
if (!this.states) {
this.queryMode = 'remote';
} else {
this.queryMode = 'local';
this.bindStore(Ext.create('Ext.data.Store', {
type: 'array',
fields: ['_placeholder_'],
data: _.map(this.states, function(state) {
return {_placeholder_ : state}; })
}));
this.displayField = this.valueField = '_placeholder_'
}
this.validator = function(v) {
var field = this.displayField,
index = this.getStore().findExact(field, v);
return (index!==-1) ? true : 'Invalid selection';
};
},
listeners: {
select: function(combo, records) {
console.log(combo.getStore().indexOf(records[0])); // !== -1
}
}
});
So that I can use it like:
requires: ['App.AutoComboBox'],
...
items: [{
xtype: 'autocombobox',
name: 'test_local',
fieldLabel: 'test_local',
states: [ 'cat', 'dog' ] // local
}, {
xtype: 'autocombobox',
name: 'test_remote',
fieldLabel: 'test_remote',
store: 'Chipmunks', // a remote store
displayField: 'chipmunk_name'
}]
...
But something is amiss. The AutoComboBox renders OK, shows dropdown of records fine, but when I select an item from the dropdown, the combobox's display field is not set. The store seems to find the selected record (as seen by the select listener), but the value is still not set...
Help? thanks.
Edit: FIXED by moving this.callParent(arguments) after the new store is bound. Now accepting answers that explain why this fixes it... (I don't know why it works.. but it does)
In the parent initComponent method, the displayField is used to create the displayTpl:
if (!me.displayTpl) {
me.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
'</tpl>'
);
} else if (Ext.isString(me.displayTpl)) {
me.displayTpl = new Ext.XTemplate(me.displayTpl);
}
The bindStore call has probably nothing to do with it, I believe that this is this line that must be put before the call to the parent method:
this.displayField = this.valueField = '_placeholder_';
I am trying to preselect items in my EXT grid based on the value of one of the items in the data store.
In my data store I fetch 7 items, the last item I grab 'installed' is a BOOLEAN and I would like to use that to preselect items in my grid.
Here is the code I have so far that is not working...
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.QuickTips.init();
var sb = $('#sb_id').val();
// Data store
var data = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
fields: [ 'name', 'market', 'expertise', 'id', 'isFull', 'isPrimary', 'installed'],
proxy: {
type: 'ajax',
url: '/opsLibrary/getLibraryJsonEdit',
extraParams: {
sb_id: sb
},
actionMethods: 'POST'
},
sorters: [{
property: 'market',
direction: 'ASC'
}, {
property: 'expertise',
direction: 'ASC'
}]
});
data.on('load',function(records){
Ext.each(records,function(record){
var recs = [];
Ext.each(record, function(item, index){
console.log(item.data);
if (item.data['installed'] == true) {
console.log('Hi!');
recs.push(index);
}
});
//data.getSelectionModel().selectRows(recs);
})
});
// Selection model
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'id'}
],
listeners: {
selectionchange: function(value, meta, record, row, rowIndex, colIndex){
var selectedRecords = grid4.getSelectionModel().getSelection();
var selectedParams = [];
// Clear input and reset vars
$('#selected-libraries').empty();
var record = null;
var isFull = null;
var isPrimary = null;
// Loop through selected records
for(var i = 0, len = selectedRecords.length; i < len; i++){
record = selectedRecords[i];
// Is full library checked?
isFull = record.get('isFull');
// Is this primary library?
isPrimary = record.get('isPrimary');
// Build data object
selectedParams.push({
id: record.getId(),
full: isFull,
primary: isPrimary
});
}
// JSON encode object and set hidden input
$('#selected-libraries').val(JSON.stringify(selectedParams));
}}
});
I was trying to use an on.load method once the store was populated to go back and preselect my items but am not having any luck.
Im a Python guy and don't get around JS too much so sorry for the noobness.
Any help would be appreciated.
Thanks again!
You should be able to do something like:
//create selModel instance above
data.on('load', function(st, recs) {
var installedRecords = Ext.Array.filter(recs, function(rec) {
return rec.get('installed');
});
//selModel instance
selModel.select(installedRecords);
});
Select can take an array of records.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select
//data.getSelectionModel().selectRows(recs);
Didn't work because store's don't have a reference to selection models it is the other way around. You can get a selection model from a grid by doing grid.getSelectionModel() or
you can just use the selModel instance you created
var selModel = Ext.create('Ext.selection.CheckboxModel', {
I have Combo ExtJS, that should be filled by the data from Spring MVC - like this:
var LongRecord = Ext.data.Record.create([
{name: 'id', mapping: 'id'}
]);
var comboStore = new MyDataStore.data.Store({
proxy: new MyDataStore.data.DwrProxy({
invoker: function(params, arg, cb) {
// data from server
AssetScreener.getEntityOwnerIds(cb);
console.log("invoker has been called");
}
}),
reader: new Ext.data.ArrayReader({}, LongRecord),
listeners: {
'load': function(s, recs) {
alert("!");
}
}
});
Combo code:
new Ext.form.ComboBox({
store: comboStore,
typeAhead: true,
triggerAction: 'all',
editable: false,
width: 100,
displayField: 'id',
valueField: 'id'
});
Problem is that data, that I'm getting from server, looks like this
'5','0',["1","8","133"]
I need to slice the array ["1","8","133"] and show this in combo (change backend java-code is unwishable way).
In combo after this code is executed I see the three empty items. Need hints, please.
In the load event, you'll get the ["1","8","133"] from the recs parameter after slicing. Use store.loadData() to replace the current store records with the correct ones.
You can create a model out of the array to feed the store like so:
var i, item, feed = [];
for(i=0; i<array.length; i++)
{
item = array[i];
feed.push(Ext.create('com.your.Model', {
id : item
}));
}
store.loadData(feed);