In ExtJS 3, how to do I go about altering the base Ext.form.Field and Ext.form.Field so that they all have a listener set for the 'hide' event?
I've tried using both Ext.apply and Ext.override to no avail. I don't want to use Extend because then I'd have to extend each different field type.
Ext.override(Ext.form.Field, {
initComponent: Ext.form.Field.prototype.initComponent.createSequence(function(){
this.on({
...
});
})
});
Related
I have a custom Ng2 component a I am using the Model-Driven approach.
<form [ngFormModel]="myForm" class="layout vertical relative">
<my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>
So inside my custom component I have all the logic I need but I can't find a way to get a reference to the ngControl to set it to valid or invalid from inside my custom component.
You can check this link for a working example: https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore
Some key aspects:
You need to implement ControValueAccessor.
export class Datepicker implements ControlValueAccessor {
Inject in your component the ngControl and register it:
constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;
From within your component you should have a form that validates the field so you can subscribe to emit the correct value or set the error of the parent ngControl form.
this.dateForm = builder.group({
dateControl: ['', Validators.compose([Validators.required, CustomValidators.frenchDate])],
});
this.dateForm.valueChanges
.subscribe((val) => {
if (this.dateForm.valid) {
this.onChange.emit(this.dateToTimestamp(val.dateControl));
} else {
this.ngControl.control.setErrors({ "wrongDate": true });
}
});
this.myForm.controls['currentValue']....
but there is currently no way to explicitely set it to valid or invalid.
You can define a validator and change the criteria so it marks the control invalid.
See for example https://github.com/angular/angular/issues/4933
How to set VALID or INVALID on any formGroup
// Where this.form === FormGroup;
// FormGroup can be deeply nested, just call at the level you want to update.
// That level should have direct access to base FormControls
// Can be done in a validator function;
this.form.get('name').setErrors({required: true});
// => this.form.get('name').invalid === true;
// Perhaps on Submit, click, event NOT in validator function
Object.entries(this.form.controls).forEach(([key, ctrl]) => {
ctrl.updateValueAndValidity();
});
// => this.form.get('name').invalid === false;
// => this.form.get('name').valid === true;
// => this.form.get('name').errors === null;
I have a grid with a customized selModel and cellediting plugin. Now I need to add also Checkbox Selection Model to it. Is this possible to have two selModels? Here is my existing code
selModel: Ext.create('TTT.MultiCellSelectionModel', {
mode: 'MULTI',
allowDeselect: true
}),
multiSelect: true,
selType: 'cellmodel'
as far as i know its not possible for grid having more than one SelectionModel.
but it could be done if you override or make new SelectionModel class which have your requirement.
Ext.define('TTT.CustomSelectionModel', {
extend: 'TTT.MultiCellSelectionModel',
// you can put your logic here
})
But you will need extra time for it.
I'm trying to add a CSS property dynamically to a control.
I have a group of RadioButton. On selection of any one of the buttons, I want to make one layout visible.
Below are some of the snippets I tried, none of them seem to work!
Snippet-1
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
fcid.visibility = "hidden";
}
Snippet-2
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').css("visibility","hidden");
}`
Snippet-3
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').hide();
}
You cannot use fcid.visibility = "hidden"; and expect it to behave like a DOM object; it's not, it's a Javascript class with getters, setters, events, aggregations, etc.
Therefore, you should use the control's properties instead: fcid.setVisible(true);
See the API docs for the correct signature of the control/layout properties
You can:
var fcid = ...byId("FC7");
fcid.setVisible(false);
Or
fcid.$().hide(); // or every other jquery method
Or
fcid.addStyleClass("hiddenObject");
Last one with Css-Class:
.hiddenObject { display:none; }
Here's a simple fiddle to demo my situation...
http://jsfiddle.net/UnsungHero97/EM6mR/17/
What I'm doing is adding an event handler for current & future elements, using .on(). I want to be able to remove these event handlers for specific elements when something happens; in the case of the fiddle, when the radio button is selected, the event handler for the blue elements should be removed and clicking those elements should not do anything anymore.
It doesn't seem to be working :(
How do I remove the event handler attached to document that I created with .on() for those specific blue elements?
The signature for your .on() and .off() has to match.
These two do not match so the .off() call won't find matching event handlers to remove:
$(document).on('click', '.btn', function() {
update();
});
$(document).off('click', '.blue');
Note, the selector passed to .on() and .off() is different.
When using the dynamic form of .on() (where you pass a selector as an argument to .on()), you can't remove just part of the items. That's because there's only one event handler installed on the root element and jQuery can only remove the entire thing or not at all. So, you can't just .off() some of the dynamic items.
Your options are to remove all the event handlers with:
$(document).off('click', '.btn');
and, then install a new event handler that excludes the items you don't want such as:
$(document).off('click', '.btn:not(.blue)');
Or, teach the event handler itself how to ignore .blue items:
$(document).on('click', '.btn', function() {
if (!$(this).hasClass('blue')) {
update();
}
});
Be careful of how you attach your events; this works fine for me:
$('.btn').on('click', function() {
update();
});
$('#disable').on('change', function() {
$('.btn').off('click');
});
Only way seems to be:
$('#disable').on('change', function() {
$(document)
.off('click', '.btn')
.on('click', '.btn:not(.blue)', update);
});
I'm trying to start a jquery ui resizable instance, but using a selector added to the DOM by jquery itself. This is a basic example of my script:
HTML:
<div class='lyr'></div>
jQuery:
// Add class
$('lyr').addClass('fixed');
// Resizable
$('.fixed').resizable({
aspectRatio: true,
handles: 'all'
});
I've thought about using something along the lines of live() or bind() but I have no event to bind to. Any help appreciated.
I have used the LiveQuery plugin - http://brandonaaron.net/code/livequery/docs in the past to be able to target elements added to the dom, like in your case.
If I've got this right, you want anything on the page which has the class "fixed" to be resizable, even if the class is added after the page has loaded? You're right that live, bind and delegate won't help here.
I can think of two possibilities, neither lovely.
First, set up a live "mouseenter" event which will make the element resizable if it wasn't before:
$(body).delegate(".fixed", "mouseenter", function(ev) {
var target = $(ev.target);
if (target.data("resizable")) return;
target.resizable({
aspectRatio: true,
handles: 'all'
});
})
This gets us round the problem of having no event to bind to.
Alternatively, you could monkeypatch jQuery.fn.addClass:
var classRe = new RegExp(c + className + \b);
._addClass = jQuery.fn.addClass;
jQuery.fn.addClass = function(className) {
if (classRe.test(classname)) {
if (this.data("resizable")) return;
this.resizable({
aspectRatio: true,
handles: 'all'
});
}
jQuery.fn._addClass.apply(this, arguments);
}
Of course this will only work if the class is added through the addClass method.
Also in your example,
$('lyr').addClass('fixed');
Should probably be:
$('.lyr').addClass('fixed');