making Ext.Action's text property dependent on another field's value - extjs4.1

I have a grid within a window. The grid has 3 Actions: Edit, Delete and Disable.I was wondering if it is possible to make the text of the Disable Action (which is currently 'Disable/Enable') to be dependent on the Current Status of the record selected. So say the user selects a record whose Current Status is Enabled, then the action's text should be 'Disable'. If, however, the user selects a record whose status is Disabled, then the action's text should be 'Enable'. Is it possible to do this when using Action? Or do I need to use a button instead of Action?

I am assuming your action button is in a toolbar that is docked to the top of your grid panel. The only tricky thing is getting a reference to the grid (without hardcoding it). The grid's 'select' event only gives you a reference to the rowmodel used.
/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something',
itemId: 'myAction',
action: 'myAction' // I don't like itemId's personally :)
});
/* In the Controller */
init: function() {
this.control({
'mygrid': {
select: this.onRecordSelect
}
});
},
onRecordSelect: function(rowModel, record) {
var grid = rowModel.views[0].ownerCt);
var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
var enabled = (record.get('CurrentStatus') == "Enabled");
action.setText(enabled ? 'Disable' : 'Enable');
action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}
/* in SASS */
.myDisableCls{
background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}
Good luck!

I solved the problem in another way. This is my code:
grid.getSelectionModel().on({
selectionchange: function(sm, selections) {
if (selections.length > 0) {
Edit.enable();
Delete.enable();
if(selections[0].data.CurrentStatus == "Disabled"){
Disable.setText("Enable");
Disable.enable();
}else{
Disable.setText("Disable");
Disable.enable();
}
} else {
Edit.disable();
Delete.disable();
Disable.disable();
}
}
});

Related

Dojo dijit tree with checkbox is not keyboard accessible

I have created a dijit.Tree object where every node is a checkbox. When you select/deselect the parent node, the child nodes get selected/deselected;
when one of the children is deselected, the parent gets deselected; when all the children are selected, the parent gets selected. It works perfectly fine.
However I need it to be keyboard accessible. When I navigate to the tree nodes and press spacebar or Enter, nothing happens.
I tried adding tabindex and aria-role to the checkbox (programmatically), but it did not work.
Here is the fiddle - http://jsfiddle.net/pdabade/pyz9Lcpv/65/
require([
"dojo/_base/window", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel",
"dijit/Tree", "dijit/form/CheckBox", "dojo/dom",
"dojo/domReady!"
], function(win, Memory, ObjectStoreModel, Tree, checkBox, dom) {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var myStore = new Memory({
data: [{
id: 'allDocuments',
name: 'All Documents'
}, {
id: 'inboxDocuments',
name: 'Inbox Documents',
parent: 'allDocuments'
}, {
id: 'outboxDocuments',
name: 'Outbox Documents',
parent: 'allDocuments'
}, {
id: 'draftDocuments',
name: 'Draft Documents',
parent: 'allDocuments'
}, {
id: 'finalDocuments',
name: 'Final Documents',
parent: 'allDocuments'
}],
getChildren: function(object) {
return this.query({
parent: object.id
});
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: {
id: 'allDocuments'
}
});
// Create the Tree.
var tree = new Tree({
model: myModel,
autoExpand: true,
getIconClass: function(item, opened) {
// console.log('tree getIconClass', item, opened);
// console.log('tree item type', item.id);
},
onClick: function(item, node, event) {
//node._iconClass= "dijitFolderClosed";
//node.iconNode.className = "dijitFolderClosed";
var _this = this;
console.log(item.id);
var id = node.domNode.id,
isNodeSelected = node.checkBox.get('checked');
dojo.query('#' + id + ' .dijitCheckBox').forEach(function(node) {
dijit.getEnclosingWidget(node).set('checked', isNodeSelected);
});
if (item.id != 'allComments') {
if (!isNodeSelected) {
var parent = node.tree.rootNode; // parent node id
//console.log(node);
parent.checkBox.set('checked', false);
} else {
var parent = node.tree.rootNode;
var selected = true;
var i = 0;
dojo.query('#' + parent.id + '.dijitCheckBox').forEach(function(node) {
if (i > 0) {
var isSet = dijit.getEnclosingWidget(node).get('checked');
console.log(isSet);
if (isSet == false) {
selected = false;
}
}
i++;
});
if (selected) {
parent.checkBox.set('checked', true);
}
}
}
//console.log(node.id);
},
_createTreeNode: function(args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
console.log(args);
var cb = new dijit.form.CheckBox({
"aria-checked": "false",
"aria-describedby": args.label
});
cb.placeAt(tnode.labelNode, "first");
tnode.checkBox = cb;
return tnode;
}
});
tree.placeAt(contentHere);
tree.startup();
tree.checkedItems();
//tree.expandAll();
});
}
Any ideas as to how to make it keyboard accessible?
Thanks!
Looking into the dijit/Tree source I see that it sets the function _onNodePress() as an event handler for keyboard events. You can override it (or add an aspect after it) and handle the key presses you want manually. It takes as argument the tree node and an event object that you can use to check specifically for the space and the enter key.
I forked your jsfiddle with an example: https://jsfiddle.net/pgianna/jjore5sm/1/
_onNodePress: function(/*TreeNode*/ nodeWidget, /*Event*/ e){
// This is the original implementation of _onNodePress:
this.focusNode(nodeWidget);
// This requires "dojo/keys"
if (e.keyCode == keys.ENTER || e.keyCode == keys.SPACE)
{
var cb = nodeWidget.checkBox;
cb.set('checked', !cb.get('checked'));
}
}
Do not add role, aria-checked, nor tabindex to the checkbox. Those are already built into the control, so you are adding risk of breaking it down the road. You can probably also get rid of every role="presentation" as those are on <div>s and <span>s which are presentational by nature. Finally, you need <label> on each block of text that is associated with a checkbox if you want this to be accessible. The aria-describedby is incorrect and is the less good option anyway.
I am getting the error: Uncaught TypeError: tree.checkedItems is not a function (line 159)
You also have a big focus management problem. Put the following in your CSS and you will see that it takes two presses of the Tab key for each single control (if starting at a focused checkbox): :focus {outline:2px solid #f00;}
It looks like you have the containing elements stealing any clicks, meaning the correct element never gets selected. The <span> with classes dijit dijitReset dijitInline dijitCheckBox keeps stealing focus as it toggles its tabindex from -1 to 0, taking itself in and out of the tab order. That may be a factor.
I suggest addressing the script error and then looking at focus management.
With dijit, there's all kinds of stuff going on in the background that might be out of your control. As aardrian said, there's lots of role=presentation and all the aria tags on the <input type='checkbox> are superfluous. dijit is probably (incorrectly) setting all that. An <input type='checkbox> already handles selections and it's role is inherently a checkbox. Those aria properties are for when you're making a custom checkbox out of div/span tags.
There is a native checkbox buried down in the code but it has opacity set to 0 so you can't see it. dijit is probably using it for the checkbox events.
The native checkbox also has data-dojo-attach-event="ondijitclick:_onClick". I'm not sure what that means but anytime I see "click" in an event name, I get suspicious that it might not work with a keyboard.
I tried the example on https://dojotoolkit.org/reference-guide/1.10/dijit/form/CheckBox.html and it works with the keyboard. Hit space will check and uncheck the box. Whether you can see the focus on the checkbox is another issue.
As a side note, it might be nice if your checkbox tree used aria-checked="mixed" for the parent branch. Anytime you have child checkboxes where some are selected and some are not, you can use "mixed" for the parent checkbox to indicate a mixture of selections. Not sure if dijit supports that.

In Extjs4 how to set scrollbar position to bottom of form panel

i am working in extjs4. i have form panel with autoscroll true. I have 20-25 fields with fileUpload field at bottom. When i am uploading file, form's scroll is going to top by default. i want to keep scroll of form as it is on where it was while uploading file. So how to set this scrollBar at bottom of or at upload field section in extjs4
You can try by adding the following method to your form declaration:
scrollToField: function(fieldId) {
var field = Ext.get(fieldId);
field.el.scrollIntoView(this.body.el);
}
Here you have a working sample
IMHO,it will be better, however, to group fields using tabs or something similar to avoid having a long a and hard to read / fill form
I have solve this problem into Ext js 4.2 for Ext.form.panel
See the following code. It will helpful to you.
onRender function call on render event
onRender: function () {
this.callParent(arguments);
if (!this.restoreScrollAfterLayout) {
this.mon(Ext.get(this.getEl().dom.lastElementChild), 'scroll', this.onScroll, this);
this.restoreScrollAfterLayout = true;
}
},
onScroll: function (e ,t, eOpts) {
this.scroll = Ext.get(this.getEl().dom.lastElementChild).getScroll();
},
afterLayout: function () {
this.callParent(arguments);
if (this.restoreScrollAfterLayout && this.scroll) {
var el = Ext.get(this.getEl().dom.lastElementChild),
scroll = this.scroll;
el.scrollTo('left', scroll.left);
el.scrollTo('top', scroll.top);
}
}

dijit.CheckedMenuItem - Changing the checked value in runtime

This is how I create the dropdown menu with checkboxes using dijit.
layerList.reverse();
var menu = new dijit.Menu({
id : 'layerMenu'
});
dojo.forEach(layerList, function(layer) {
menu.addChild(new dijit.CheckedMenuItem({
label : layer.title,
id : layer.title.replace(" ",""),
checked : layer.visible,
onChange : function(evt) {
if (layer.layer.featureCollection) {
//turn off all the layers in the feature collection even
//though only the main layer is listed in the layer list
dojo.forEach(layer.layer.featureCollection.layers, function(layer) {
layer.layerObject.setVisibility(!layer.layerObject.visible);
});
} else {
layer.layer.setVisibility(!layer.layer.visible);
}
}
}));
});
var button = new dijit.form.DropDownButton({
label : i18n.tools.layers.label,
id : "layerBtn",
iconClass : "esriLayerIcon",
title : i18n.tools.layers.title,
dropDown : menu
});
dojo.byId('webmap-toolbar-center').appendChild(button.domNode);
I can access the individual dijit.CheckedMenuItem at runtime when the onChange event fired because I know their id. Since dijit does not has a RadioButton for MenuItem, is there a way I can change the checked status in runtime. Using "this.Id" and "evt", I can know which one is being check/uncheck by the user. Technically I can try to uncheck the other checked items if necessary to simulate the radio button behavior.
Can someone tell me how I can check/uncheck dijit.CheckedMenuItem in runtime? What properties and functions I need to call?
You should be able to just set checked to false on the other CheckedMenuItem widgets
checkedMenuItemWidget.set('checked',false)
To uncheck any given checkedMenuItem.

Nested List refresh

Any one knows how to refresh a nested list?
I am creating a list. On tap of an item it loads a nested list. if i traverse in a nested list and then tap to another item and come back to the prev item, its still stuck in the place where it was last left.
I tried using
Ext.getCmp('nestedList').refresh();
but thet doesn seem to work.
Below is my code for the nested list panel.
Ext.define("InfoImage.view.nestedList", {
extend:'Ext.NestedList',
xtype:'nestedList',
id:'nestedList',
config:{
fullscreen:'true',
title:'Work Items Task 1',
// ui:'normal',
xtype:'nestedList',
displayField : 'text',
store:'nestedListStore',
style: {
'background-color': 'rgba(0,140,153,0.1)'
}
}
});
and the code for loading the nested list is:
showListDetail : function(view, index, item, record) {
var rec = view.getStore().getAt(index);
// Ext.getStore('workItemStore').add({Task: '7'
// },{Server: 'mobcomp1'});
if (index == 0) {
this.getDocPanel().animateActiveItem(
this.getNestedPanel(), {
type : 'slide',
direction : 'up',
duration : 250
});
Ext.getCmp('nestedList').reload();
}
Any help is appreciated.
Thanks in advance.
You can't directly refresh a nestedlist. There's no refresh() or reload() method for it.
All you need to do is load the store which is used for your nestedlist using it's configured proxy.
this.store.setProxy({
// proxy configurations ...
// ......
// ......
});
this.store.load();

jqGrid: different navigator buttons depending on login status

I want to use different navigator buttons in jqGrid depending on login status.
for example: if the user is logged in then add/delete/edit button appeared.
Any ideas?
Thanks in advance.
It is possible to add buttons programmatically using the navButtonAdd method (for the navigation bar) and the toolbarButtonAdd method for the toolbar. For example:
jQuery("#grid").toolbarButtonAdd('#t_meters',{caption:"MyButton",
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
And:
jQuery("#grid")..navButtonAdd('#pager',{
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
For more information see the Custom Buttons on the Wiki.
Anyway, once this code is in place, you can detect login status server-side. Then use this knowledge to generate client code that only adds the buttons to your grid if the user is supposed to have access to them.
You can also use for example userdata (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#user_data) to send information about buttons which you need to have in the navigator. userdata should be set by server. Then with respect of:
var navGridParams = jQuery("grid_id").getGridParam('userData');
// var navGridParams = { edit: false, add: false, search: true }
you can get the data set by the server.
Now the typical call like:
jQuery("grid_id").navGrid('#pager', { edit: false, add: false, search: true });
You should place not after creating of jqGrid, but inside of than inside of loadComplete. So the code could looks like following:
var isNavCreated = false;
jQuery('#list').jqGrid({
// ...
loadComplete: function () {
var grid = jQuery("grid_id");
if (isNavCreated === false) {
isNavCreated = true;
var navGridParams = grid.getGridParam('userData');
grid.navGrid('#pager', navGridParams);
}
},
// ...
});
Another option that I see, is to use cookie instead of userdata to send information about navGridParams back to the client.