I have a custom dialog with a button and an input on it. On the click event of the button I want to trigger the OnChange function of the input. I don't know how to get the sibling UIElement of the current one.
Here is an example of my code:
{
id : 'txtUrl',
type : 'text',
label : 'My input',
onChange : function() {
alert('content changed')
}
}
{
type : 'button',
align : 'center',
label : 'My Button',
onClick : function() {
// execute the input.onChange()
?????
}
}
I just find out (another developer showed to me), and here go answer:
{
id : 'info',
label : 'my container',
elements :
[
{
id : 'txtUrl',
type : 'text',
label : 'My input',
onChange : function() {
alert('content changed')
}
}
{
type : 'button',
align : 'center',
label : 'My Button',
onClick : function() {
this.getDialog().getContentElement("info", "txtUrl").onChange();
}
}
]
}
Related
I have a jTable with a child table for each row. On the toolbar header of the child table I have added a custom toolbar item. I want to make that toolbar item dynamic in the sense that if there are already some rows I do not want it to show. I came across a very similar query for the main toolbar "add new" button which added a function to run on recordsLoaded:
Below is my first attempt - it is just the field entry for the main table that specifies the child table. However the ".find(....)" spec will not work in my case as mine is a custom toolbar item. What do I need to put as the .find criteria?
Thanks
Dance: {
title: '',
width: '4%',
sorting: false,
create: false,
listClass: 'centreCol',
display: function(book) {
var $img = $('<img src="Images/layers.png" title="Show associated dance entries" />');
//Open child table when user clicks the image
$img.click(function() {
var thisrow = $img.closest('tr'); //Parent row
if($('#BookTableContainer').jtable('isChildRowOpen',thisrow)) { // Clicking image a second time closes the child row
$('#BookTableContainer').jtable('closeChildRow',thisrow);
} else {
currentTitleID = book.record.DanceTitleID;
$('#BookTableContainer').jtable(
'openChildTable',
thisrow,
{
title: 'Related Dance',
toolbar: {
items: [
{
icon: 'Images/add.png',
text: 'New dance',
tooltip: 'Add dance details',
click: function() { CreateDanceDialog(); }
}
]
},
actions: {
listAction: 'BookPageData.php?action=listChildDances&DanceTitleID=' + currentTitleID,
// createAction: 'dancesData.php?action=createAssignment',
// deleteAction: 'dancesData.php?action=deleteAssignment'
},
recordsLoaded: function(event, data) {
var rowCount = data.records.length;
if (rowCount>0){
$('#BookTableContainer').find('.jtable-toolbar-item.jtable-toolbar-item-add-record').remove();
}
},
fields: {
DanceID: { key: true, create: false, edit: false, list: false, visibility: 'hidden' },
DanceTitleID: { type: 'hidden', defaultValue: currentTitleID },
ChoreographerID: { title: 'Choreographer', width: '40%', options: function() { return ChoreographerOptions; } },
FormationID: { title: 'Formation', width: '30%', options: function() { return FormationOptions; } },
GenreID: { title: 'Genre', width: '30%', options: function() { return GenreOptions; } }
}
},
function(data) { data.childTable.jtable('load'); }
);
}
});
//Return image to show on the person row
return $img;
}
},
Try this
$('#BookTableContainer').find('.jtable-toolbar').remove();
I try to update label on menu item when I click this menu item. It should works like click->'show' label, click->'hide' label. This is my code:
const template = [{
label: 'Menu',
submenu: [{
label: 'Search',
click() {
win.webContents.executeJavaScript("showSearch()"); // it run function changeSearch() in main.js
}
},
{
label: 'Resetuj',
click() {
win.loadURL(`file://${__dirname}/index.html?del=1`);
}
},
{
label: 'Quit',
accelerator: 'Q+CmdOrCtrl+Q',
click() {
win.loadURL(`file://${__dirname}/index.html?logout=1&close=1`);
}
}]
}];
changeSearch() I tried something like this:
Menu.items[0].submenu.items[0].label = "Changed label";
I think what you are looking for is something like this:
function addMenuItems(items, position) {
const updateSearchItems = [{
label: 'newOptionDisabled',
enabled: false,
}, {
label: 'newOptionWithAction',
enabled: true,
key: 'newOptionWIthAction',
}, {
label: 'Do some stuff',
visible: false,
key: 'doSomeStuff',
click: () => {
// stuff
},
}];
items.splice.apply(items, [position, 0].concat(updateSearchItems));
}
By defining your menu items as an object that you can reference you can always modify the object later. In my example I use a addMenuItems function that enables me to specify where I want to insert these items within the existing object.
I did this to change/modify my menu item dynamically:
const menuTemplate = [{
label: 'Options',
submenu: [
{
label: 'Hide',
click() {
changeLabel('Show'); // Put logic here
}
}
]
}];
function changeLabel(label) {
menuTemplate[0].submenu[0].label = label;
// Rebuild menu
const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);
}
This code is not tested!
I would like to use the Angular directives concept to display a popupwindow for a child node of a tree view upon a Rightclick event. Below is my sample code:
Tree.html
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children"
data-ng-rigtclick="onItemRightClick()"
data-node-children="children">
</div>
treeViewcontroller.js
$scope.roleList1 = [
{ "roleName" : "User", "roleId" : "role1", "children" : [
{ "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
{ "roleName" : "subUser2", "roleId" : "role12", "children" : [
{ "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Admin", "roleId" : "role2", "children" : [] },
{ "roleName" : "Guest", "roleId" : "role3", "children" : [] }
];
Treeview.js
scope.onItemRightClick= function(val)
{
alert(val.roleName);
}
How can I achieve this?
In order to achieve a right click, you have to write a custom directive which will catch the event for you.
Here an example:
Markup
<div id="name" ng-controller='myController'>
<button name="button" my-right-click='test()'>my button</button>
</div>
The directive
app.directive('myRightClick', function($parse) {
return {
scope: false,
restrict: 'A',
link: function(scope, element, attrs) {
var fn = $parse(attrs.myRightClick);
element.bind('contextmenu', function(event) {
scope.$apply(function() {
event.preventDefault();
fn(scope, {$event:event});
});
});
}
}
});
The controller
app.controller('myController', function($scope) {
$scope.test = function() { // method is passed in by attribute
console.log('hello from controller');
};
});
angular-treeview directive doesn't have right click attribute exposed.
You can refer Angular treeview git repository.
If you need this feature, you can start introducing your custom attribute in existing directive and push your changes back to git. It's up to you.
I tried this however the event console.log() is being triggered X amount of times based on nodes level.
So lets say i clicked on a node 4 levels deep.
It will console.log() 4 times iterating through each nodes parent.
I'm trying to create custom property values (based on a condition of a function) for my Ext objects, instead of specifying just a value.
Example 1:
old code (working)
this.buttons = [
{
text: 'Save',
new code (not working)
this.buttons = [
{
text: function() {
return 'Save X';
},
Example 2:
old code (working)
}, {
width: 270,
labelAlign: 'right',
xtype: 'textfield',
name: 'user_id',
fieldLabel: 'User ID',
hidden: true
}]
new code (not working)
}, {
width: 270,
labelAlign: 'right',
xtype: 'textfield',
name: 'user_id',
fieldLabel: 'User ID',
hidden: function() { return true; }
}]
Example 3:
Ignore entire textfield object (lazy instance) completely based on a condition:
}, {
width: 270,
labelAlign: 'right',
xtype: 'textfield',
name: 'employee_number',
fieldLabel: 'Employee Number'
}]
You simply can't do it this way. It is not possible to replace a type with a function. In your case you assign a function reference to a variable which is expected to be boolean, same for the string.
Solution A.
You should consider to write yourself a field factory. Within that factory you can then execute any function before assigning configs. (Sort of same then B but can be used to reduce function calls)
Solution B.
Use a function reference itself. This one should then get executed. (spare the requirement of class extension and is over that reuseable)
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.namespace('my.util.helper');
my.util.helper.decideHide = function() { return true; }
// Create the combo box, attached to the states data store
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
test: my.util.helper.decideHide(),
listeners: {
afterrender: function(n) {
alert(n.test);
}
}
}]
});
Solution C.
And the solution I use most in such cases are simplified if else statements
// ... // more code
{
text: myCondition ? 'Text A' : 'Text B',
// more code
}
// ... // more code
Yeah that is not going to work, some Ext configs take a function that will be evaluated but most of them don't. Instead of creating anonymous functions and not invoking them I would do something like this:
Ext.define('UserPanel', {
extend : 'Ext.panel.Panel',
initComponent : function() {
this.items = [{
xtype : 'button',
text : this._getSaveButtonText()
}, {
width : 270,
labelAlign : 'right',
xtype : 'textfield',
name : 'user_id',
fieldLabel : 'User ID',
hidden : this._isUserIdHidden()
}]
this.callParent();
},
_getSaveButtonText : function() {
return 'Save';
},
_isUserIdHidden : function() {
return true;
}
});
Please help me. how can I get user input.
Mytest.views.Forma = Ext.extend(Ext.Panel, {/*This is a panel which displays all*/
initComponent: function(){
Ext.apply(this, {/*derive the form*/
items: [ {
xtype: 'fieldset',
id: 'formaFieldset',
title: '',
items: [
{
name: 'from',
label: 'From'
}
]
},
{
xtype: 'button',
cls: 'btnAction',
text:'Price Check',
handler:function(){
//Here you need to print the values of form fields
}
});
}
} ]
});
Mytest.views.Forma.superclass.initComponent.call(this);
}
});
Ext.reg('forma', Mytest.views.Forma);
You can use getValues() function to obtain the values in the form field.