I have made code like below
Ext.define('Abc.store.Indicator', {
extend: 'Ext.data.Store',
alias: 'store.indicator',
fields: ['key', 'value'],
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: [
["ALL", "ALL"],
["Y", "Y"],
["N", "N"]
]
});
Ext.define('Abc.view.main.Indicator', {
extend: 'Ext.form.field.ComboBox',
xtype: 'indicator',
fieldLabel: 'Ind',
name: 'indicator',
displayField: 'value',
valueField: 'key',
store: {
type: 'indicator'
}
});
and in report items i use like
items: [{xtype:'indicator'}]
When user opens the report, i want 'N' to be displayed as default value. How do i do this. I set 'value' key, but when dropdown is opened, selected value is different.
Maybe you can put queryMode: 'local' in the config of 'Abc.view.main.Indicator', or the store will load.
Here is the key code classic/classic/src/form/field/ComboBox.js line 1562
if (lastSelected && selectionModel.selected.length && store.indexOf(lastSelected) > -1) {
itemNode = lastSelected;
}
So the new Store doesn't has the lastSelected which you set.
Related
I have this ==>
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
But my _ab_x_style has the data which is not user-friendly as I have wanted them to be. So I need a function to return a translation of those data to user-friendly words. The problem is HOW???
For that purpose, you need to apply a cellFilter to the cell content. And a translate function to drop down options which also has those non-userfriendly data.
cellFilter is a filter to apply to the content of each cell.
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%", cellFilter: 'TranslateMe'
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
Right after your angular controller, you implement that filter by
Yours.controller('BodyController', function($scope, $http, $filter, uiGridConstants, $timeout, $resource) {
})
.filter( 'TranslateMe', function (){
return(function(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':(value=='dataExcepNew'?'aqua':'neutral')))));
});
});
Then, for your drop-down options, you also have to apply a function
function TranslateMe(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':'neutral'))));
}
for your options building as such
function loadOptions( $scope, serverdata ){
_.forEach( _.sortBy( _.uniq( _.pluck( serverdata, '_ab_x_style' )) ), function ( eachOpt ) {
RISKS.push( { value: eachOpt, label: TranslateMe(eachOpt) } )
} );
$scope.uiGrid306.columnDefs[10].filter.selectOptions = RISKS;
}
Result (instead of user unfriendly data, I have the names of the colors) --
I'm pulling my hair out on this one...
I have a view with some grids, a store and a viewModel. I need different filtered versions of the store in different grids, so I'm trying to bind each filtered store to a grid. Now I can't even get a store to load in a grid in the first place...
Here's what my code looks like:
Store:
Ext.define('My.store.Admin.Kinder', {
extend: 'Ext.data.Store',
model: 'My.model.Kind',
storeId: 'adminKinderStore',
alias: 'store.adminKinder',
proxy: {
type: 'ajax',
method: 'post',
url: '/getKinder',
reader: {
type: 'json',
rootProperty: 'kinder'
}
}
});
ViewModel:
Ext.define('My.model.kindViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.kindViewModel',
requires: [
'My.model.Kind',
'My.store.Admin.Kinder'
],
view: 'kindView',
stores: {
warteliste: {
type: 'adminKinder'
}
}
});
View:
Ext.define('My.view.Admin.kinder', {
extend: 'Ext.panel.Panel',
alias: 'widget.kindView',
id: 'kinder-panel',
requires: [
'My.view.Admin.kindController',
'My.model.kindViewModel'
],
controller: 'kind',
border: false,
maxWidth: 960,
session: My.session,
viewModel: {
type: 'kindViewModel'
},
initComponent: function() {
this.activeTab = 'warteliste-tab';
this.callParent();
},
items: [
{
xtype: 'grid',
id: 'warteliste-grid',
bind: {
store: '{warteliste}'
},
border: false,
margin: '0 0 20px 0',
selModel: {
allowDeselect: true
},
columns: [
// some grid columns
],
listeners: {
afterRender: function(grid) {
grid.store.load();
}
}
}]
});
I get an error message "Cannot modify ext-empty-store", which must mean that the store is not (yet) bound when store.load() is called in the afterRender listener.
Strange thing is, when I console.log the grid, the store is there. When I console.log grid.store, an empty store is returned.
I got the same issue in afterRender event and solved it by not getting the store from the grid like
grid.store.load();
but from the ViewModel (ViewController scope):
this.getViewModel().getStore('{warteliste}').load();
Check if the store is created as expected in viewmodel. Normally, we do not have store definition files in ./store directory but we place their configurations in viewmodel.
See an example of that here: http://extjs.eu/ext-examples/#bind-grid-form - MainModel::stores
The solution to your original problem
I need different filtered versions of the store in different grids
are chained stores.
See an example of how to implement them here: http://extjs.eu/on-chained-stores/
for me it was
myGrid.getViewModel().getStore('myStoreName').load();
Hello i am have
proxy: {
type: 'ajax',
url: '/book/list?filter=',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
and then i have response from server
data":[{"id":1,"book":"Now","author":"q"}]}
and this date i am want insert in grid with next columns: Id, Book, Author
Its Simple.For more details you can check out docs
Ext.create('Ext.grid.Panel', {
title: 'RecordsGrid',
store: yourStore,//your store which contains data returned form the server
columns: [
{ text: 'Id', dataIndex: 'id' },
{ text: 'Book', dataIndex: 'book'},
{ text: 'Author', dataIndex: 'author' }
]
});
I am implementing a project picker for a Rally custom app and would like to select a projects children automatically when the parent is selected from the picker. I was able to get the ObjectID and Name of the objects I want to select but can't seem to get them to be selected from the picker. I attempted this using the "fireEvent" method but had no success. Here's what I have so far:
var teamPick = this.down('#filterPanel').add({
xtype: 'rallymultiobjectpicker',
id: 'teams',
modelType: 'project',
fieldLabel: 'Teams',
listeners: {
select: function(field, selected) {
Ext.create('Rally.data.WsapiDataStore', {
autoLoad: true,
fetch: [ 'Name', 'ObjectID' ],
filters: [
{ property: 'Parent.ObjectID', value: selected.ObjectID }
],
model: 'Project',
listeners: {
load: function(store, data) {
Ext.Array.each(data, function(child) {
console.log(child.get('Name')); //Logs the child name
});
}
}
});
},
scope: this
}
});
Are you using 2.0p3? There was a known issue with events not being correctly fired in the MultiObjectPicker. This should be resolved in 2.0p4. I ran your code in a 2.0p4 app and it functioned as expected.
As a side note your child project query can be written like this as well:
filters: [
{ property: 'Parent', value: '/project/' + selected.ObjectID }
]
The 2.0p4 version of the component also added a new event called selectionchange which gives you an array of the currently selected values (since it is a multi select picker). There are individual select and deselect events that fire when a specific item is selected/deselected.
I was able to accomplish this without the use of the fireEvent method. Instead, I used the getValue and setValue methods and added the child projects to the state manually:
this.down('#filters').add({
xtype: 'rallymultiobjectpicker',
id: 'teams',
modelType: 'project',
listeners: {
blur: function() { this.down('#teams').collapse(); },
select: function(field, selected) {
Ext.create('Rally.data.WsapiDataStore', {
autoLoad: true,
fetch: [ 'Name', 'ObjectID' ],
filters: [
{ property: 'Parent.ObjectID', value: selected.ObjectID }
],
model: 'Project',
listeners: {
load: function(store, data) {
var selected = this.down('#teams').getValue();
Ext.Array.each(data, function(child) {
selected.push(child.data);
});
this.down('#teams').setValue(selected);
},
scope: this
}
});
}
scope: this
}
});
I have a class (Person) with 4 properties : Id, FirstName, LastName, Code.
I show a person list in a jqgrid. I'd like a link column with this format (the code has this format 2011.0001)
/Person/Detail/Code => /Person/Code/2011.0001
But I have this with the code below :
/Customer/Detail?Code=2
I tried this :
colModel: [
{ name: 'Code', index: 'Code', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Customer/Detail', idName: 'Code' }},
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' }
],
How can I correct this ?
Thanks,
Update1, Data format
[
{"Id":1,"FirstName":"AAAA","LastName":"AA","Code":"2011.0001"},
{"Id":3,"FirstName":"BBBB","LastName":"BB","Code":"2011.0003"}
]
You can try to use the custom formatter in the form
formatter: function (cellvalue, options, rowObject) {
return '' + cellvalue + '';
}
instead of predefined formatter 'showlink':
formatter: 'showlink', formatoptions: {baseLinkUrl:'/Customer/Detail', idName:'Code'}
You can easy receive /Customer/Detail?Code=2011.0001 if you have unique data in the 'Code' column and if you would add key: true to the column definition. In the case the Id value from the JSON input will be ignored and the value from the 'Code' column will be used as the rowid. If you do need to have the href value in the form /Customer/Detail/Code/2011.0001 or instead of /Customer/Detail?Code=2011.0001 you will need use custom formatter as I described before.