How can I handle on check event on dojo indirect selection:
var table = new dojox.grid.EnhancedGrid({
store: catalogLayout,
structure: layout,
id: "poolGrid",
styles: "text-align: center",
plugins: {indirectSelection: true}
}, document.createElement("div"));
This is my enhanced grid rendered on html:
<div id="contentNode" style="height:90%;width:100%"></div>
See usage section of documentation. In your case
dojo.connect(table.selection, 'onSelected'|'onDeselected', function(rowIndex){...})
// when Select All checkbox is changed
dojo.connect(table.rowSelectCell, 'toggleAllSelection', function(newValue){...})
Related
Can I have cell borders (using dojo / js code without changing the css property - .dojoxGridCell) programmatically.
If you have setup your Grid programmaticaly you can use the "style" Option to change the layout of the grid for example.
YourGrid = new EnhancedGrid({
id: 'YourGridId',
store: YourStore,
style: "width:500pt;height:200pt;",
structure: layoutYourGridsName,
rowSelector: '20px',
keepSelection: false,
plugins: {
indirectSelection: IndirectSelectionSettings,
filter: Filtersettings,
pagination: PaginationSettings,
exporter: true
}
});
I have multiple FilteringSlect on my page except first one, rest are disabled. Upon selecting a value in first, 2nd filteringselect gets enabled and so on. I'm able to achieve this. When a user selects value in the first filteringselect and then press tab to go to the next fitleringselect, it gets enabled but user has to click the mouse on 2nd fitleringselect to enter a value. I have a jsfiddle link
`http://jsfiddle.net/qpue91L9/75/`
which demonstrates the problem. What I want is, as soon as user tabs from first filteringselect, next one should get enabled and without an extra click, user should be able to select a new value by typing inside the fitleringselect textbox.
I think I got it working [Working fiddle][1]
[1]: http://jsfiddle.net/qpue91L9/125/
Also as suggested, providing the complete working code
HTML Code
<input id="stateSelect">
<input id="stateSelect1">
<input id="stateSelect2">
JS Code
require([
"dojo/store/Memory", "dojo/on","dijit/form/FilteringSelect", "dojo/domReady!",'dijit/registry',"dijit/focus","dojo/dom"
], function(Memory, on,FilteringSelect,ready,registry,focusUtil,dom){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL", timeStamp:"1211753600"},
{name:"Alaska", id:"AK", timeStamp:"1211753601"},
{name:"American Samoa", id:"AS", timeStamp:"1211753602"},
{name:"Arizona", id:"AZ", timeStamp:"1211753603"},
{name:"Arkansas", id:"AR", timeStamp:"1211753604"},
{name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
{name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
{name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
{name:"California", id:"CA", timeStamp:"1211753608"},
{name:"Colorado", id:"CO", timeStamp:"1211753609"},
{name:"Connecticut", id:"CT", timeStamp:"1211753610"},
{name:"Delaware", id:"DE", timeStamp:"1211753611"}
], idProperty: "timeStamp"
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
store: stateStore,
tabIndex: 1,
searchAttr: "name",
identifier: "timeStamp",
}, "stateSelect").startup();
var filteringSelect1 = new FilteringSelect({
id: "stateSelect1",
name: "state",
tabIndex: 2,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp" ,
disabled:true,
}, "stateSelect1").startup();
var filteringSelect2 = new FilteringSelect({
id: "stateSelect2",
name: "state",
tabIndex: 3,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp",
disabled:true,
}, "stateSelect2").startup();
on(dijit.byId("stateSelect"),"KeyPress",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
});
on(dijit.byId("stateSelect"),"change",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
dijit.byId("stateSelect1").focus();
});
on(dijit.byId("stateSelect1"),"KeyPress",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
});
on(dijit.byId("stateSelect1"),"change",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
dijit.byId("stateSelect2").focus();
});
});
I checked out your example and got it working somewhat....
Update Example
Basically, I added this:
require([ "dijit/focus", "dojo/dom", "dojo/domReady!" ], function(focusUtil, dom){
var domObj = dom.byId("stateSelect1");
focusUtil.focus(domObj);
});
and also added tabIndex property to each select object. The problem is it only works when you actually select an item from the list by clicking on it. If tab is used then it doesn't work. You could probably use this example and trap the tab event to make it work the way you want it too.
I'm trying to use a enhanced grid with Dojo JSONREST and i'm running into some issues.
I've been looking up some examples but can't figure out how to do what i need.
In the code below my rest service takes two parameters, and the query on the service works.
The problem is that when grid.startup() is called it seems to call the Rest service again, since there are no parameters passed the rest service falls over. What am i doing wrong here?
Also is there any way to update to the store so that is only contains the queried results?, so that when the grid appears it just contains these values?
Appreciate any help or pointers..
ready(function(){
var grid;
var store = new JsonRest({
target: "rest/search"
});
store.query({term: "test", category: "category"},
{
start: 10,
count: 10,
}).then(function(data){
// how do i update store with queried results?
});
dataStore = new ObjectStore({ objectStore: store });
/*set up layout*/
var layout = [[
{'name': 'Name', 'field': 'col1', noresize: true, 'width': '100%'},
]];
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
grid.startup();
}
Have you tried setting the query parameter of the grid? A link to the docs. And a link to an example.
And by looking at the code in the question, it seems that the grid should display chunks/pages of data - an example using the pagination plugin for the grid.
The filter plugin might also be of interest to you.
when you define a new grid you have to pass it to dojo:
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();
I've this requirement of giving user provision of subscribing to certain categories. The layout which is to be designed is having -
checkbox => at top toggling automatic subscription setting.
dataview => at middle, having list of subscriptions and checkbox field.
button => allowing user to update the subscription list.
I've setup the dataview correctly. Dataview is added as fallows -
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
When I try to add component no 1 and 3 ( specified above in question ) , dataview is not getting displayed. I'm getting checkbox and button only. When I inspect the rendered html, I realize that dataview is not even populating with data config. The code I used to add these three components is as fallows -
Ext.define("PApp.view.home.Subscription", {
extend:'Ext.Container',
xtype:'subscription',
config: {
layout:'fit',
fullscreen:true,
scrollable:false,
items: [
{
xtype:'container',
fullscreen:true,
items:[
{
xtype:'checkboxfield',
name : 'subscriber-setting',
label: 'Subscriber',
value: 'yes',
checked: true
},
{
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
},
{
xtype:'button',
text:'Update',
ui:'action'
}
}
]
}
});
I can't figure out why dataview is not getting displayed ( not even populated with data ). When dataview is not breaded between the checkbox and button, it gets rendered as expected.
and when dataview is breaded ,it looks like this -
Please try giving some height in css of template or dataview config with hbox layout of container
Tried few things and managed to solve this problem. Mostly, list or dataview are used to display fullscreen content. But in my case, I needed it between two other components.
To make this work, I added following config to parent container -
layout: {
type: 'vbox',
align : 'stretch'
},
This was not sufficient though. Need to add flex config in each component. Without this config, dataview was not being seen. And I was wrong about data not populating indeed it was ( missed it first time since html is deeply nested ). Here's the preview how it looks.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.