How to add checkbox to qml treeview? - checkbox

I added checkboxes through the treeview's itemDelegate property, but when I want to click on the parent node to select the child node, I find that I won't do it. .
TreeView {
id: treeView
anchors.fill: parent
frameVisible: false
anchors.top: mainToolBar.bottom; anchors.bottom: parent.bottom;
anchors.left: parent.left; anchors.leftMargin: 1
model: sysConfig
itemDelegate:CheckBox{
id:checkbox
indicator.height: 20
indicator.width: 20
text: styleData.value}}

Related

ExtJs : Container must not receive child item's click events and Process only events on container

I want to process mouse up/down events in the empty area(marked in color) which belongs to container.
As shown in the picture, container has menu bar to the left and window standard buttons to the right. Expected behavior is : click on menu items/buttons must trigger their event handlers and click on empty area(marked in color) must be processed by container to support window drag.
I tried this in container:
listeners: {
mousedown: {
fn: function() {
_mousepressed = true;
},
element: 'el'
},
mouseup: {
fn: function() {
_mousepressed = false;
},
element: 'el'
},
When clicked on menu item button, the event is first coming to container's mouseup handler and then button handler is called. Instead , I expect not to receive event in container when child items are clicked. I need clicks on empty areas in container.
Is there any extjs way to identify events on parent container and not on its chid items?

How do I find matching subGridOptions.data element for expanded row?

In Angular UI-Grid v4.0.4, I have a button called "ViewLog" for each row that's inside an expandable row. I'm trying to display the data that's inside the child row when the ViewLog button is clicked.
This is the structure
Parent Row 1
|
--- (ViewLog) Child 1 (json for child 1)
--- (ViewLog) Child 2 (json for child 2)
--- (ViewLog) Child 3 ...
|
Parent Row 2
|
--- (ViewLog) Child 1 (json for child 1)
--- (ViewLog) Child 2 ...
The code for expandable:
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{
name: 'Log',
field: '',
width: "85",
cellTemplate: '<button ng-click="grid.appScope.displayLogFile(row.entity.subGridOptions.data[howToFindRightElement]);">View Log</button>'
}
]
};
}
});
In my example above, in cellTemplate, row.entity.subGridOptions.data is an array. I can't seem to figure out how to identify the correct element from that array that matches the child row selected after expanding the Parent row.
I just want to find the JSON from the child row and pass it over to displayLogFile().
So if I understand you correctly, you want to see the data of a newly generated ui grid that is created after expanding the row. If that is the case, then I think you need to treat is as another scope. The row.entity in expandable !== row.entity in cellTemplate. That being the case, then all you should need is this row.entity. So the following columnDef setup should work.
row.entity.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{
name: 'Log',
field: '',
width: "85",
cellTemplate: '<button ng-click="grid.appScope.displayLogFile(row.entity);">View Log</button>'
}
]
};

ExtJS 4 - how to hide context menu when left clicking the Ext.panel.Panel?

I have context menu on a panel (geoext 2 map panel)
This is how I init it :
var ctxMenu;
Ext.get("mapPanel-body").on("contextmenu", function (event, element) {
event.stopEvent();
if (!ctxMenu) {
ctxMenu = Ext.create('Ext.menu.Menu', {
width:100,
height:100,
margin: '0 0 10 0',
items: [{ text: 'test', action: 'test'}]
});
}
ctxMenu.showAt(event.getXY());
return false;
});
What happens is that right click on the map opens the context menu ... but it stays open till I choose an item from the menu (left click outside it doesnt close it)
I'm using ExtJS 4.2.1
Why it behaves like this ?
May be the reason is , panel doesnot contain a default contextMenu event.
But you are defining a contextMenu by using the on on the panel.
For this issue you can define a click event for the panel by using the same on config and check whether the object contextMenu is present or not.
If it is present , then hide the contextMenu by using contextMenuObject.hide().

extjs4 tree child item did not show until click on 'sort' header button

I callled root.appendChild() to add couple children to a treepanel root and called root.expand() to expand the tree but the child nodes did not show until I click on any of the the sort button on the header. Is there any property I need to set to show the child node programmally?
Thanks for help.
The following is the code:
tree.getRootNode().removeAll();
var root = tree.setRootNode({
PRTNUM:'root',
id: 'treeRoot',
leaf: false
});
for (var i = 0; i < result.data.length; i++) {
var rec = result.data[i];
var node = root.appendChild({
PRTNUM: rec.PRTNUM,
DESC: rec.DESC,
icon: this.convertTypeToIcon(rec.TYPE),
id: rec.PRTNUM,
leaf: true
});
}
root.expand();
Since your root node originally had no children it was marked as a leaf.
I found that the following works for parent nodes that are initially leaves and you have to add nodes programatically:
parentNode.set("leaf", false); //must be set to work properly
parentNode.appendChild(newChild);
parentNode.expand();
I found out that adding the following lines after calling appendChild() fix thie 'tree grid did not expand until click on 'sort' column button. Thanks.
root.expandChildren(true);
root.sort(function() {});

ExtJS (3.4): Update ToolTip for a Panel in a TabPanel

How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.
You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.
// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
items: [{
title: 'one tab',
tabTip: 'something',
itemId: 'firstTabID',
html: 'haha wooo'
}]
});
// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
// find its descendent span that contains the tab's title text
.child('span.x-tab-strip-text', true)
// and set the tool tip
.qtip = 'something completely different!';
I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)

Resources