Im new to Extjs 7.6 and using Sencha Architect.
I changed a remote filtered store to a local store.
How do i use the filterBy function in my controller?
I have read some examples but dont really understand.
The value is given by an input field.
Following my remote filter method:
application.getStore('ServiceStore').filter(
[{id: 'number', property: 'number', value: value, operator: 'LIKE', andor:'OR'},
{id: 'description', property: 'description', value: value, operator: 'LIKE', andor:'OR'}]
);
How to translate this to a local filterBy method?
I have found the answer:
store = application.getStore('ServiceStore');
store.filter(new Ext.util.Filter({
filterFn: function(item) {
if (item.data.number.indexOf(value) > -1 || item.data.description.indexOf(value) > -1) {
return true;
} else {
return false;
}
}
}));
Related
I have tried to get the slider value, Instead of numeric value. Im getting as array object as a value, How to rectify it.
Eg:
xtype: 'sliderfield',
html: '<span class="not-like">Not Likely</span> <span class="like">Like</span>',
label: '',
name: 'like',
maxValue: 10,
value: '1'
}
Instead of
xtype: 'sliderfield',
html: '<span class="not-like">Not Likely</span> <span class="like">Like</span>',
label: '',
name: 'like',
maxValue: 10,
value: [1]
}
using Sencha architect version:
3.1.0.1934
Any help in getting the slider value.
I hope you asking for Thump index value.
OnDrag and Onchage event you get the thumb Index and value.
OnDragPointSlider : function(sliderfield, sl, thumb, e, eOpts) {
var slider = sliderfield.getComponent();
var index = slider.getThumbIndex(thumb);
var newValue = slider.getValue()[index];
},
I am using Angular Formly, and try to build a form with a Select field which allows to pick the state of a country.
The second field is a typeahead field, which allows to enter valid area names belonging to this state.
However, I am failing to dynamically change the typeahead options array.
I have taken the Typeahead type definition from the Formly Examples, and works fine with a static array of options:
formlyConfig.setType({
name: 'typeahead',
template: '<input type="text" ng-model="model[options.key]" ' +
'uib-typeahead="item for item in to.options | filter:$viewValue | limitTo:8" ' +
'class="form-control">',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
});
This is my form definition:
$scope.selectZoneFormFields = [
{
key: 'stateid',
type: 'select',
templateOptions:{
label: Constants.DIVPOL,
valueProp: 'id',
labelProp: 'nombre',
options: StatesManager.get()
}
},
{
key: 'zoneName',
type: 'typeahead',
templateOptions: {
label: 'Zona',
options: $scope.zoneNames
}
}
];
Then, I watch changes in stateid and refresh $scope.zoneNames:
$scope.$watch('geo.stateid', function(newValue, oldValue) {
if (newValue === undefined || newValue.length !== 2 || newValue === oldValue )
return;
console.log(' !!! STATE change detected: ' + oldValue + '-->' + newValue);
refreshZones(newValue);
});
The problem is that the options for the typeahead field remain those which are loaded at the beginning (initial value of $scope.zoneNames)
I have tried to use a controller inside formly field definition, but with no success.
Ideas?
{
key: 'zoneName',
type: 'typeahead',
templateOptions: {
label: 'Zona',
options: []
},
expressionProperties: {
'templateOptions.options': function($viewValue, $modelValue, $scope){
$scope.to.options = []; //set to an empty array
if($scope.model.stateid) { //if the state has been selected
$scope.to.options = //whatever code you use to get the zones
return $scope.to.options; //return the options
}
}
}
}
I have a editable Uigrid with ui-grid-cellnav directive to enable edit on focus. I also have a filter to display value instead of id in the dropdown.
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div>
JS
$scope.gridOptions.columnDefs = [
{ name:'name', width:100 },
{ name:'age', width:100},
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
cellFilter: "griddropdown:this", editDropdownIdLabel:'id',
editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
{ id: 1, gender: 'male' },
{ id: 2, gender: 'female' }
] }
];
An error occurs whenever the dropdown value is modified. It seems the filter parameter is passed as a string instead of actual object, but not sure why. Works ok if I remove the cellnav directive.
Plnkr
Thanks in advance!
Interesting, I played with it a little bit and it looks like you are getting the desired results, just that occasionally ui-grid likes to pass a string as a parameter instead of the object.
If you add a check for a string in your filter it looks like you will still be getting the desired results, that's if I am understanding properly:
String check to add:
if (typeof context !== 'string') {}
Full Filter:
.filter('griddropdown', function() {
return function (input, context) {
if (typeof context !== 'string') {
var map = context.col.colDef.editDropdownOptionsArray;
var idField = context.col.colDef.editDropdownIdLabel;
var valueField = context.col.colDef.editDropdownValueLabel;
var initial = context.row.entity[context.col.field];
if (typeof map !== "undefined") {
for (var i = 0; i < map.length; i++) {
if (map[i][idField] == input) {
return map[i][valueField];
}
}
} else if (initial) {
return initial;
}
}
return input;
};
});
i have the next code, i want change the class when the value is equal to "abc" but i can't add some class :
$scope.formFields = [
{
key: 'email',
type: 'input',
templateOptions: {
type:'email',
placeholder: 'Correo',
required:true,
class: 'some-clase'
}
}]
now, I know well then the change is done but I can not even add a simple class :
expressionProperties: {
'templateOptions.class': '"glyphicon form-control-feedback glyphicon-"'
}
help me please , if they can add an example in jsbin, codepen... thanks
Your expressionProperties property is a formly expression and can therefore be a function. It should probably be something more like this:
'templateOptions.class': function($viewValue, $modelValue, scope) {
if ($viewValue === 'abc') {
return 'some-class';
} else {
return 'some-other-class';
}
}
Case :
I am trying to update the value of ng-model inside the controller but it is not working and i wonder why , any idea ?
HTML :
<select ng-model="dumm" ng-options="item.name as item.type for (name, item) in availableFilters" ng-change="selectFilter()"></select>
JS :
$scope.selectFilter = function () {
$scope.availableFilters[$scope.dumm].visible = true;
$scope.dumm = "";
};
$scope.availableFilters = {
name: {
type: 'Name',
name: 'name'
},
producttype: {
type: 'Product type',
name: 'producttype',
data: $scope.xxx
},
status: {
type: 'Status',
name: 'status',
data: $scope.unitStatusTypes
}
};
$scope.dumm should be an object rather than a string, otherwise the binding won't work - this fact is quite obscure in Angular's docs. The binding should look like this:
<select ng-model="dumm.value"...
and the variable's definition:
$scope.dumm = {value: ""};