I'm trying to create programatically an EnahncedGrid with a menu. I've got the grid to work, but I've been unable to use the menu. It just not shows up. The code is as follows:
<script>
sMenu = new dijit.Menu({});
sMenu.addChild(new dijit.MenuItem({
label: "Delete Record",
iconClass: "dijitEditorIcon dijitEditorIconCancel",
onClick : function(){
alert(1);
}
}));
sMenu.startup();
/**
* El grid propiamente dicho
*/
var grid = new dojox.grid.EnhancedGrid({
id: "grid_"+i,
query: {
idDocument: '*'
},
plugins: {
nestedSorting: true,
indirectSelection: true,
menus: {rowMenu:sMenu}
},
onRowDblClick: openFile,
structure: layout
})
</script>
Any idea what I'm doing wrong?
I haven't used this myself, but I have two possible suggestions:
First, make sure you're dojo.require-ing "dojox.grid.enhanced.plugins.Menu" and are only instantiating the widgets within a dojo.addOnLoad or dojo.ready.
If you've already done that, the second thing I'd suggest is giving your menu an id, and passing that id to the rowMenu property of the menus object (in other words, pass a string, not the widget itself). Although, the way you're doing it seems like it should work, judging from the code.
You can see a test page with working menus here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/enhanced/test_enhanced_grid_menus.html
Related
I am working on dojo enhanced grid view. I am able to display the grid in UI. But AnyColumn option is added as new column.
Example:
Any help will be appreciated...
Here is the Code
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore, //Data store passed as input
structure: gridStructure, //Column structure passed as input
autoHeight: true,
autoWidth: true,
initialWidth: width,
canSort : true,
plugins: {
filter: {
//Filter operation
isServerSide: true,
disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
setupFilterQuery: function(commands, request){
if(commands.filter && commands.enable){
//filter operation
}
}
}
}, dojo.byId("mydatagrid"));
mygrid.startup();
Thanks,
Lishanth
First, do not use EnhancedGrid, instead use either dgrid or gridx.
I think by default anycolumn is added to the dropdown. If you want to remove then, I would suggest to
Register for click event on the filter definition
Iterate through the drop-down and remove the first entry which is anyColumn
or you can also try something like
dojo.forEach(this.yourgrid.pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
dropdownbox._colSelect.removeOption(dropdownbox.options[0]);
});
Updated answer is. I know this is not the elegant way of doing it but it works.
//reason why I'm showing the dialog is that _cboxes of the filter are empty initially.
dijit.byId('grid').plugin('filter').filterDefDialog.showDialog();
dojo.forEach(dijit.byId('grid').pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
var theSelect = dropdownbox._colSelect;
theSelect.removeOption(theSelect.options[0]);
});
//Closing the dialog after removing Any Column
dijit.byId('grid').plugin('filter').filterDefDialog.closeDialog();
Im new to Dojo and im trying to make some ui, but only using the programmatic way.
I would like if someone could show me some example of how to make a form programmarically using Dojo dijit.form.Form. I've been looking for some example but all i can find is the declarative way of it.
A more object oriented solution:
define( [
"dojo/_base/declare",
"dijit/form/Form",
"dijit/form/Textarea",
"dijit/form/Button"
],
function(declare, Form, TextArea, Button) {
return declare( "mypackage.MyForm", Form, {
textarea: new TextArea({}),
submitButton: new Button({
type: "submit",
label: "ready!"
}),
constructor: function(args) {
declare.safeMixin(this, args);
},
onSubmit: function() {
alert(this.textarea.get('value'));
},
postCreate: function() {
this.domNode.appendChild( this.textarea.domNode );
this.domNode.appendChild( this.submitButton.domNode );
}
});
}
);
Just drop a new mypackage.MyForm({}) at any place you might expect a widget.
Its pretty straight forward. You just create all the pieces of the the form, and then append all the pieces to their respective parent. To create the form objects, like any dijit object, you pass the constructor a param object, and a domNode to place it at, like so:
var resetbtn = new dijit.form.Button({
type: 'reset',
label: 'Reset'
}, dojo.doc.createElement('button'));
The full example is here. To find out what properties can be added to the params object, see the API Docs. Any of the properties can be added to the param list.
How do you make a titlePane's height dynamic so that if content is added to the pane after the page has loaded the TitlePane will expand?
It looks like the rich content editor being an iframe that is loaded asynchronously confuses the initial layout.
As #missingno mentioned, the resize function is what you want to look at.
If you execute the following function on your page, you can see that it does correctly resize everything:
//iterate through all widgets
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
The above function iterates through all widgets and resizes all of them. This is probably unneccessary. I think you would only need to call it on each of your layout-related widgets, after the dijit.Editor is initialized.
The easiest way to do this on the actual page would probably to add it to your addOnLoad function. For exampe:
dojo.addOnLoad(function() {
dijit.byId("ContentLetterTemplate").set("href","index2.html");
//perform resize on widgets after they are created and parsed.
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
});
EDIT: Another possible fix to the problem is setting the doLayout property on your Content Panes to false. By default all ContentPane's (including subclasses such as TitlePane and dojox.layout.ContentPane) have this property set to true. This means that the size of the ContentPane is predetermined and static. By setting the doLayout property to false, the size of the ContentPanes will grow organically as the content becomes larger or smaller.
Layout widgets have a .resize() method that you can call to trigger a recalculation. Most of the time you don't need to call it yourself (as shown in the examples in the comments) but in some situations you have no choice.
I've made an example how to load data after the pane is open and build content of pane.
What bothers me is after creating grid, I have to first put it into DOM, and after that into title pane, otherwise title pane won't get proper height. There should be cleaner way to do this.
Check it out: http://jsfiddle.net/keemor/T46tt/2/
dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
var pane = new dijit.TitlePane({
title: 'Dynamic title pane',
open: false,
toggle: function() {
var self = this;
self.inherited('toggle', arguments);
self._setContent(self.onDownloadStart(), true);
if (!self.open) {
return;
}
var xhr = dojo.xhrGet({
url: '/echo/json/',
load: function(r) {
var someData = [{
id: 1,
name: "One"},
{
id: 2,
name: "Two"}];
var store = dojo.data.ObjectStore({
objectStore: new dojo.store.Memory({
data: someData
})
});
var grid = new dojox.grid.DataGrid({
store: store,
structure: [{
name: "Name",
field: "name",
width: "200px"}],
autoHeight: true
});
//After inserting grid anywhere on page it gets height
//Without this line title pane doesn't resize after inserting grid
dojo.place(grid.domNode, dojo.body());
grid.startup();
self.set('content', grid.domNode);
}
});
}
});
dojo.place(pane.domNode, dojo.body());
pane.toggle();
});
My solution is to move innerWidget.startup() into the after advice to "toggle".
titlePane.aspect = aspect.after(titlePane, 'toggle', function () {
if (titlePane.open) {
titlePane.grid.startup();
titlePane.aspect.remove();
}
});
See the dojo/aspect reference documentation for more information.
I wanto to add a tool (search, help, gear, ...) in a window dynamically, like this:
http://www.rahulsingla.com/sites/default/files/content/blog/extjs/extjs-panel-add-tool.htm
And I need to create more than one instance of UIMyWindow at the same time.
However, I'm using Ext Designer which generates 2 files:
MyWindow.ui.js: class declaration.
MyWindow.js: methods implementation.
Besides Ext Designer hasn't an option Tools at design time (I didn't find).
I was adding the tool outside MyWindow.js and MyWindow.ui.js, like this:
var winMyWindow = new UIMyWindow({
autoShow: 'true',
tools: [{
type:'gear',
handler: function(){
// Some code...
}
}]
});
But I want to put this block inside MyWindow.js. So, I did this:
UIMyWindow = Ext.extend(UIMyWindowUi, {
tools: [{
type:'gear',
handler: function(){
// Some code...
}
}],
initComponent: function() {
UImenuDock.superclass.initComponent.call(this);
If you ask me "Why not to put this code inside MyWindow.ui.js?", I would answer "because I don't want to put this code manually every time I make changes in the design file (Ext Designer)".
Well, if I open one window, it's seems work ok, but if I open a second at the same time, the tools are duplicated in the second window...
So, any idea how to add tools dynamically in MyWindow.js in this specific case?
put 'tools' into initComponent
UIMyWindow = Ext.extend(UIMyWindowUi, {
initComponent: function() {
this.tools = [{
type:'gear',
handler: function(){
// Some code...
}
}],
UImenuDock.superclass.initComponent.call(this);
I'm trying to get a Dojo datagrid working - I have replicated the first example on the documentation page (http://docs.dojocampus.org/dojox/grid/DataGrid) & it works just fine.
However, when I try to display the grid inside another div (i.e. putting 'gridContainer4' from the example inside any other div) nothing displays...
Any help would be much appreciated - can't find anything about this anywhere online!
Finally figured it out:
The example text creates the new dojox.grid.DataGrid and applies it to "document.createElement('div')" - changing this to the ID of an existing div fixed the problem (rather than appendChild-ing it to another div)
Original code:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
changes to:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, "gridContainer4");