set AfterLabelTextTpl after form render - extjs4

I have a form with dynamic fields. In the afterrender event of the form I want to set the afterLabelTextTpl property. I can set this property but I can't see it change in my form. How can I achieve this?
Snippet:
listeners: {
beforerender: function () {
var fields = me.getForm().getFields();
Ext.each(fields.items, function (f, idx) {
f.afterLabelTextTpl = requiredTpl;
console.log(f.afterLabelTextTpl);
}); //eo Ext.each
}
}
Edit:
I was looking for the beforerender method

Try
f.labelEl.dom.innerHTML = "LABEL:<span style='color:red;font-weight:bold' data-qtip='Required'>*</span>";

You can not use this property after the component is already rendered.
The initRenderTpl (which makes use of the label templates) method is run only if the component is not yet rendered. Once its rendered it will not run again.
You will need to update the DOM directly.

I would recomend something like this in your form:
setRequired: function(field, index) {
field.afterLabelTextTpl = requiredTpl;
},
initComponent: function(arguments) {
var me = this;
this.on('beforeadd', function(me, field){
var fields;
if (field.isXType('fieldset')) {
fields = field.query('field');
Ext.each(fields, me.setRequired);
} else {
me.setRequired(field);
}
});
// rest of logic
me.callParent(arguments);
},

Related

odoo, how to reload widget on every db record form view?

Hi this question is related with my own answer here the thing is that the widget run only once, when the first database record object is show on the form view, but when I change to another record, the view its not updated with the actual record. I think that is because I run all the code in the ´start´ but I dont know how and where put he code to do this.
the code again:
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.ShowBoard = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
this.show_board();
},
show_board: function () {
var Game = new instance.web.Model("chess.game"),
record_id = this.field_manager.datarecord.id,
record_name = this.field_manager.datarecord.name,
self = this;
self.el_board = self.$('#board');
Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
console.log(data);
self.cfg = {
position: data[0].pgn,
orientation: 'white',
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
ChessBoard(self.el_board, self.cfg);
});
}
});
instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
}
})(openerp);
In your start function:
this._ic_field_manager.on('view_content_has_changed', this, function() {
'put your code here'
})
EDIT:
Actually there's another event you could listen, 'load_record'.
Because 'view_content_has_changed' is triggered every time a single field in the view is modified, and you maybe don't want this behavior.

Binding the Dialog to my angular controller

I am trying to bind a MetroUI modal dialog to an angular controller property. This way I can show and hide the dialog using binding.
DIRECTIVE
appMod.directive('showDialog', ['$timeout', function ($timeout): ng.IDirective {
return {
restrict: 'A',
link: function (scope, element, attrs, ngModel) {
scope.$watch(attrs.showDialog, function (value) {
if (value) {
element.show();
}
else {
element.hide();
}
});
}
}
}]);
HTML:
<div class="padding20 dialog" id="dialog9"
data-role="dialog" data-close-button="true"
data-overlay="true" data-overlay-color="op-dark"
show-dialog="vm.isDialogVisible">
This way I can control opening the dialog by setting the vm.isDialogVisible Boolean on my controller.
Problem is that I am trying to update the vm.isDialogVisible attribute when the user closes the dialog (via the close button). Anyone has some ideas how to fix that?
It is always cool to find your own solution (took me a day :-)). I made a mistake to use the show / hide features of the element. I should have used the data attribute of the element. That way I am able to access the
onDialogClose
function, which enable me to update the scope. Below my solution
appMod.directive(showDialog, ['$timeout','$parse',function ($timeout, $parse){
return {
restrict: 'A',
scope:false,
link: function (scope, element, attrs) {
var e1 = theDialog.data('dialog');
$timeout(() => {
e1.options.onDialogClose = (dialog) => {
var model = $parse(attrs.showDialog);
model.assign(scope, false);
scope.$digest();
};
}, 0);
scope.$watch(attrs.showDialog, function (value) {
if (value) {
e1.open();
}
else {
e1.close();
}
});
}
}
}]);

dojox/checkedMultiSelect add option on top AS 'select all'

I am trying to populate the dojox/form/checkedMultiSelect with a top option named: 'select all'.
One way to do this is to use declare function to change the '_addOptionItem' function.
The problem is that this '_addOptionItem' function is using a declared object named: 'formCheckedMultiSelectMenuItem' inside the 'CheckedMultiSelect' widget, AND gives an error with: 'formCheckedMultiSelectMenuItem is not defined'.
How to fix this?
My JS code:
declare_CheckedMultiSelect: function(formCheckedMultiSelectItem){
return declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_addOptionItem: function(item){
var item;
if(this.dropDown){
item = new formCheckedMultiSelectMenuItem({
option: option,
parent: this.dropDownMenu
});
c(item)
this.dropDownMenu.addChild(item);
}else{
item = new formCheckedMultiSelectItem({
option: option,
parent: this
});
this.wrapperDiv.appendChild(item.domNode);
}
this.onAfterAddOptionItem(item, option);
}
});
}
Here is working prototype of what you are trying to achieve http://jsfiddle.net/894af/750/ please feel free to ask any follow up question. it is done in different way, but what I simply did is:
1) when create the mutliselect get each check box after creating using
onAfterAddOptionItem
2) listen to the select all checkbox and then override the onclick fucntion and then change the selection of all the checkboxs, based on the selection of the checkbox.
if(option.value == "SA"){
on(item, "click", function(evt){
var optionsToSelect = checkedMultiSelect.getOptions();
for(var i = 0 ; i < optionsToSelect.length;i++){
if(optionsToSelect[i].value == "SA"){
if(optionsToSelect[i].selected){
checkedMultiSelect.set("value",optionsToSelect);
}else{
checkedMultiSelect.set("value",[]);
}
}
}
});
}

Durandal.js 2.0 Set document title within activate method

In my shell, I have set up my routes like so:
router.map([
{ route: '', title: 'Search', moduleId: 'viewmodels/search/search' },
{ route: 'location/:paramX/:paramY', title: 'Location', moduleId: 'viewmodels/location/location' }
]).buildNavigationModel();
I have an activate method like so:
activate: function(paramX, paramY) {
// TODO: set document title
// TODO: do something with input params
}
For the location page, the document title is set to the Location | [Name of my app]. I would like to change this to be made up from the params taken in the activate method (paramX, paramY) on my activate method for the location page. How do I do this?
You can achieve this by overriding the default behaviour of the process of the router to set the title.
The title is always set after the navigation is complete so the activate method of your viewmodel has been called before. The current implementation in Durandal 2.0 is:
router.updateDocumentTitle = function(instance, instruction) {
if (instruction.config.title) {
if (app.title) {
document.title = instruction.config.title + " | " + app.title;
} else {
document.title = instruction.config.title;
}
} else if (app.title) {
document.title = app.title;
}
};
This is called in the method completeNavigation in the router.js.
In instance param you have the ViewModel that you are activating so a possible solution could be to override the updateDocumentTilte function in shell.js or main.js and use the instance to get the values that you want. For example you could do something like this (make sure you have the app and the router instance):
router.updateDocumentTitle = function (instance, instruction) {
if (instance.setTitle)
document.title = instance.setTitle();
else if (instruction.config.title) {
if (app.title) {
document.title = instruction.config.title + " | " + app.title;
} else {
document.title = instruction.config.title;
}
} else if (app.title) {
document.title = app.title;
}
};
In this code we check if the instance (the current ViewModel) contains a method setTitle, if it does then we get the title calling the function. Then in our viewmodel we can have something like:
define(function () {
var id;
var vm = {
activate: function (param) {
id = param;
return true;
},
setTitle: function () {
return 'My new Title ' + id; //Or whatever you want to return
}
};
return vm;
});
If your viewmodel does not contain this method, then it should fall to the current behaviour.
Here's how I achieved it:
activate: function (product, context) {
// Update the title
router.activeInstruction().config.title = "Buy " + product;
...
...
...
...
It works, but I don't know if that's the approved method.
I needed to use observables for this, because the data that the title is derived from is loaded by AJAX in the activate method.
So I put this in my application bootstrap code:
var originalRouterUpdateDocumentTitle = router.updateDocumentTitle;
router.updateDocumentTitle = function (instance, instruction) {
if (ko.isObservable(instance.documentTitle)) {
instruction.config.title = instance.documentTitle;
}
return originalRouterUpdateDocumentTitle(instance, instruction);
};
If the view model has an observable named documentTitle, it is copied to the instruction.config.title. This is then bound to the actual document.title by Durandal (using a subscription), so that whenever the value of the documentTitle observable changes, the document.title changes. The documentTitle observable could be a plain observable or a computed observable.
This approach also delegates most of the work to the actual router.updateDocumentTitle() method, by intercepting and modifying the instruction value based on instance, and then calling through to originalRouterUpdateDocumentTitle.
This works with Durandal 2.1.0.

Migrating from YUI2 to YUI3 and domready

I want to migrate the javascript in my site from YU2 to YUI3, but I am only a poor amateur programer and I am stuck at the first pitfall.
I have the following code:
MyApp.Core = function() {
return {
init: function(e, MyAppConfig) {
if (MyAppConfig.tabpanels) {
MyApp.Core.prepareTabpanels(MyAppConfig.tabpanels);
}
},
prepareTabpanels: function(tabpanels) {
// Code here
}
}
}();
var MyAppConfig = {
"tabpanels":{"ids":["navigation"]}
};
YAHOO.util.Event.addListener(window, "load", MyApp.Core.init, MyAppConfig);
How can I pass the MyAppConfig object to the MyApp.Core.init function by using YUI3 "domready" event listener?
Thanks in advance!
You should be able to do something like:
var MyApp = {};
MyApp.Core = function(){ return {
init: function(MyAppConfig) {
console.log(MyAppConfig);
},
prepareTabpanels: function(tabpanels) {
// Code here
}
}
}();
var MyAppConfig = {
"tabpanels":{"ids":["navigation"]}
};
YUI().use('node', 'event', function(Y){
Y.on('domready', MyApp.Core.init, this, MyAppConfig);
});
Note that the event is not passed in as the first parameter, it is the config.
Y.on accepts parameters as <event_type>, <callback_function>, <context>, <params>..
any parameter after the third item is passed through to the callback function so MyAppConfig becomes the first parameter in your init.
EDIT
See the YUI3 API documentation here: http://developer.yahoo.com/yui/3/api/YUI.html#method_on