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';
}
}
Related
I'm trying to enable/disable a button when the store getNewRecords() function return the length, but not work!
bind: {
disabled: "{!grid.getStore().getNewRecords().length}"
}
Fiddle: https://fiddle.sencha.com/fiddle/1sj5
Someone have idea to how resolve this?
You need to create a formula in your viewmodel:
viewModel: {
formulas: {
hasNewRecords: function (r) {
return this.getView().down("treepanel").getStore().getNewRecords().length > 0;
}
}
}
then you can use it for your bindings:
bind: {
disabled: "{hasNewRecords}"
}
(probably not the best way to get the data you want).
You can read about it here, here and here .
What you're wanting to do here is currently not possible in the framework. Instead, you should create a ViewModel data value and modify that where need be, like this:
var form = Ext.create("Ext.form.Panel", {
viewModel: {
data: {
newRecords: false
}
},
items: [{
xtype: "textfield",
labelField: "Add Child",
name: "col1",
value: "Teste 123"
}],
tbar: {
xtype: "button",
text: "Add new record",
handler: function () {
var data = this.up("form").getForm().getFieldValues();
var rec = grid.getStore().getAt(0);
data["treeCol"] = rec.childNodes.length + 1;
// setting value, so binding updates
this.lookupViewModel().set('newRecords', true);
rec.appendChild(data);
}
},
bbar: {
xtype: "button",
text: "button to disabled when new records",
bind: {
disabled: "{newRecords}"
}
},
renderTo: Ext.getBody()
});
Or by simply doing this.
In your controller:
me.getView().getViewModel().set('storeLen', store.getNewRecords().length);
In your ViewModel, simply do this:
formulas : {
hasNewRecords : {
get : function(get){
var length = get('storeLen') // --> gets the one you set at your controller
return length > 0 ? true : false;
}
}
}
In your View:
bind : {
disabled : '{hasNewRecords}'
}
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 am trying to bind to value in defined class, to react on it change.
But no reaction happens. I extended object from data.Model, and trying to bind via links, but something doing wrong.
class with parameter:
Ext.define('Platform.core.OssStatusAdapter', {
extend : 'Ext.data.Model',
alternateClassName : [ 'OssStatusAdapter' ],
singleton : true,
fields : [ {
name : 'ossConected',
type : 'boolean',
defaultValue : false
} ]
});
Code in some class where value is changed:
OssStatusAdapter.set('ossConected',event.connected);
code where expect reaction to binding:
Ext.define('Plugin.scheduler.package.config.PackageConfigurationViewModel', {
extend : 'Ext.app.ViewModel',
...
links: {
ossAdapter: {
type: 'Platform.core.OssStatusAdapter',
create: true
}
},
...
formulas : {
canDeploy : {
bind : {
isOssUp : '{ossAdapter.ossConected}'
},
get : function(data) {
return data.isOssUp;
}
}
}
but in formula value is not changing.
What I missed?
Try to define your formula this way:
formulas: {
canDeploy: function(get) {
var connected = get('ossAdapter.ossConected');
// see if this moves when you change the record
console.log('connected', connected);
return connected;
}
}
I have a component on my view:
{
xtype : 'socekiliscombo',
name : 'socekilisOid',
labelSeparator : '',
anchor : '25%',
allowBlank : false,
itemId : 'socekilis',
params : {},
listeners : {
specialkey : Ext.emptyFn
}
}
What I want to do is to get this component's display value from a controller. First I tried to get the component itself, but unable to do it. I tried this:
var socekilistarihi = this.getTalihliKayitPanel().getComponent('#socekilis');
I get a value of "undefined".
You can use standard controller refferences.
Ext.define('App.controller.Controller', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'socekilis',
selector: '#socekilis'
}],
getComponentValue: function(){
var component = this.getSocekilis();
var value = null;
if(component){
value = component.getValue();
}
return value;
}
});
Hope it helps.
var socekilisCombo = this.getTalihliKayitPanel().down('socekiliscombo[name="socekilisOid"]'),
socekilisComboValue;
if (socekilisCombo)
{
socekilisComboValue = socekilisCombo.getValue();
}
And check this component really on talihliKayitPanel.
I'm trying to work out why when I push a view onto a Ext.Navigation.View control, the view I push renders, but the data I push with it doesn't. The view renders a very simple DataView control with some json data (name & surname).
It'll work if I create the view explicitly through "Ext.Create" (see commented out lines in controller), but I'm sure I've done this before where you can push "xtype" of the view and any relevant properties/data for the view. Am I right?
By the way, I've tested the json coming back from the form submission callback and everything is fine. It just seems to be the view doesn't want to render the data I send it as part of the "push". Here's my code. Am I missing something?:
View:
Ext.define('MyCo.Booking.view.PatientClinicSearchResults', {
extend : 'Ext.DataView',
xtype : 'DataViewPatientSearchResults',
itemTpl : '{Name}',
store : {
fields : ['Name'],
autoLoad : true
}
})
Controller :
Ext.define('MyCo.Booking.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
navViewClinics : 'NavViewClinics',
formPanelClinicPatientSearch : 'FormPanelClinicPatientSearch'
},
control: {
'NavViewClinics list' : {
itemtap : 'ClinicUserSearch'
},
'FormPanelClinicPatientSearch button' : {
tap : 'ClinicPatientSearchResults'
}
}
},
ClinicUserSearch : function(list, index, element, record) {
this.getNavViewClinics().push({ xtype : 'FormPanelClinicPatientSearch' });
},
ClinicPatientSearchResults : function(button, e) {
var form = this.getFormPanelClinicPatientSearch();
var navClinics = this.getNavViewClinics();
form.submit({
success : function(form, result) {
// var view = Ext.create('MyCo.Booking.view.PatientClinicSearchResults', {
// title : 'Search Results',
// fullscreen: true,
// store: {
// fields: ['Name'],
// data : result.items
// },
// itemTpl: '<div>{Name}</div>'
// });
// navClinics.push(view);
navClinics.push({ xtype : "DataViewPatientSearchResults",
title : 'Test',
store : {
data : result.items
}
});
}
});
}
});
JSON received from form submission callback:
{
"success" : true,
"items" : [
{
"Name": "Jon",
"Surname": "Doe"
},
{
"Name": "Karl",
"Surname": "Doe"
}
]
}
Any help would be appreciated. Thank you.
Problem solved. I removed the store declaration from the view and it worked. Just need to reference the data via the itemTpl property.