I faced a problem with my dojo 1.6.1 EnhancedGrid. I'm trying to use paging and single selection mode like this :
<div id="theId" data-dojo-type="dojox.grid.EnhancedGrid"
data-dojo-props="selectionMode:'single', plugins: { indirectSelection: true, pagination: {pageSizes: ['1'], description: true,sizeSwitch: true,pageStepper: true, gotoButton: true, maxPageStep: 4, position: 'bottom'}}">
Everything goes fine except when I select a row and then click on next page button the selection remains while the objects has changed. I have to do a dirty hack to fix this :
/**Let's hack it a bit **/
grid.pagination.plugin.nextPageHook = grid.pagination.plugin.nextPage;
grid.pagination.plugin.nextPage = function(src) {
this.grid.selection.select(-1);
this.nextPageHook();
};
This guy does his jobb.
And the seccond problem is that I am not able to set default items number it's always 25. No matter which number I pass to the plugin parameters with defaultPageSize. And even more, there is no such field in the object grid.pagination.plugin .
But still I can hack it like this :
grid.pagination.plugin.pageSize = 1;
grid.startup();
I hope I'm missing some thing and you can help me find out what. Thanks.
Sadly, it is a famous problem with Datagrid, it is kinda related to this also : http://bugs.dojotoolkit.org/ticket/13432
For the number of rows, you have to use rowsPerPage (or rowPerPage don't remember exactly) property
Also make sure the correct headers are sent in the request (range, start count, etc)
Related
Does anyone use Gemini by Yandex for testing css regression?
I faced with the following problem: need to test scroll in some page, but as I know, gemini capture whole page and show only that part which you set by adding .setCaptureElements('someElement').
E.g. I set capture element as html (which has 100% height) and my content is very huge, but gemini screenshot show up only cut over part of page without possibility to scroll cause page hasn't scroll as such...
Maybe some of you faced with same problem and have cool solution?
Thanks!
I had the necessity to make a screenshot of the page that has scrolling. I need the screenshot of the whole page and made changes which let me did it:
Used .setCaptureElements only for the element where is scrolling exist (not the whole body).
Added line compositeImage: true in configuration file.
gemini.suite('App-Name', function(test) {
test.setUrl('/')
.setCaptureElements('body')
.capture('Full Page', (actions) => actions.wait(2000))
});
//You can also use
.setCaptureElements('html') , if .setCaptureElements('body') is not working perfect for you.
You need to add this code in .gemini.js
browsers: {
'chrome-desktop': {
desiredCapabilities: {
browserName: 'chrome',
compositeImage: true,
screenshotMode: 'fullpage',
}
}
I have one Textfield, Combo and a Radio. I want to get values of these 3 fields on clicking one button. How I can get the values of above 3 without using Ext.getCmp('id').getValue();
Is there any other method is their to get the values,
please let me know.
It depends on how you have contained your fields and the button you want to click to get their values.
You can navigate up and down your containers
var TheComponent = this.up('form').down('#MyTextField')
This climbs up your container hierarchy until it finds a 'form' container (doesn't matter what its Id or name is) and them climbs down until it finds a component with the id: 'MyTextField'
If your radio button is in a radio button group container you can retrieve an object that has all your 'on' key/values.
If your container is a form you can use the method proposed by lzhaki and retrieve an object that contains all the values on your form. Just remember that combo boxes behave differently to text boxes.
Each of these methods will return either a single value or an object containing a group of values.
In ExtJS 4.1, I found the prior example was close, but incorrect:
var TheComponent = this.up('form').down('#MyTextField')
There is no "down" method in the form object (apparently form fields aren't included in the down method's navigation logic).
Here's what worked for me to set initial focus on an edit field within a form.
var theForm = this.down('form').getForm();
var theField = theForm.findField('idEditVolname');
theField.focus();
You still must use getForm() to get the embedded form object, followed by findField() to locate the specific field - at least that's what works for me.
I don't know if this is still relevant, but here goes.
First of all, in Extjs4 and up, you use Ext.ComponentQuery.query() instead of Ext.getCmp().
What this allows you to do is access any xtype you have directly, just like the up, and down methods mentioned in other answers, but this method doesn't need any anchors as it searches the entire component hierarchy. Since you have only one of each element on the page that would be very easy to achieve without using id's.
I would name the main panel that contains the fields, but that's just for convenience.
Look at this fiddle
The code is really simple:
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
name: 'myForm',
title: 'Sample Test',
layout: 'anchor',
height: 200,
items: [{
xtype:'textfield',
fieldLabel: 'text',
value: 'Oh yeah!'
}]
});
var myVal = Ext.ComponentQuery.query('panel[name=myForm] textfield')[0];
alert (myVal.getValue());
The same can be done with the radio and combo fields, and you don't need a form for that, though it is more logical that way.
I am writing FuncUnit for my application. I am browsing the application in Google Chrome. I have a textbox which is initially hidden. I need to make it visible and then clear the text already present in that textbox. I have the following code which makes the box visible but fails to clear the text in it.
S('#search').visible().clearText();
Can anyone tell what is wrong here?
Try to clear the textbox by typing - Ctrl+A and Delete.
var input = S('input.my-input');
input.type('[ctrl]a[ctrl-up][delete]', function() {
// Continue in test case after the text has been removed
});
Your statement is not accurate. visible() does not turn things visible. It is a wait function which waits for the source element to become visible before proceeding to the next action.
koalix's key sequence works. With the type() command you might need to first click into the text input before clearing it.
Try:
S('#search').visible().click().type('[ctrl]a[ctrl-up][delete]');
You could also try empty quotes <" ">
var input = S('input.my-input');
input.type('', function() {
// remove existing text
});
I don't know if you're still waiting for an answer.
I think you're not using visible() in the correct way.
In FuncUnit (see docs here), among other things, you can distinguish between "actions" and "waits". visible() is a wait, and should be used to wait for an element to become visible, like this:
S('#el').visible( function() {
// do something when element with id="el" becomes visible
});
Here's my problem: in my application I have a Dojo EnhancedGrid, backed up by an ItemFileReadStore. The page flow looks like this:
The user selects a value from a selection list.
The item from the list is posted on a server and then the grid is updated with data from the server (don't ask why, this is how it's supposed to work)
The new item is highlighted in the grid.
Now, the first two steps work like a charm; however, the third step gave me some headaches. After the data is successfully POSTed to the server (via dojo.xhrPost() ) the following code runs:
myGrid.store.close();
myGrid._refresh();
myGrid.store.fetch({
onComplete : function(items) {
for ( var i = 0; i < items.length; i++) {
if (items[i].documentType[0].id == documentTypeId) {
var newItemIndex = myGrid.getItemIndex(items[i]);
exportMappingGrid.selection.deselectAll();
exportMappingGrid.selection.addToSelection(newItemIndex);
}
}
}
});
Now, the selection of the grid is updated (i.e. the selection object has a selectedIndex > 0), but visually there's no response, unless I hover the mouse over the "selected" row. If I remove the .deselectAll() line (which I suspected as the culprit) then I sometimes end up with two items selected at once, although the grid selectionMode attribute is set to single.
Any thoughts on this one?
Thanks a lot.
You need to use setSelected(), like so
exportMappingGrid.selection.setSelected(newItemIndex, true);
The second parameter is true to select the row, false to unselect it.
This is what works for me:
grid.selection.clear();
grid.selection.addToSelection(newItemIndex);
grid.selection.getFirstSelected();
Jon
Is it possible to turn off the row selection feature on Flexigrid?
It's somewhat annoying when you haven't implemented anything that makes use of the selection.
Unfortunately Mr Flibble's accepted answer does not stop all selection capability, it merely restricts it to one row.
To disable it completely, add a new property to the $.extend block (around line 20)
// apply default properties
p = $.extend({
<SNIP>
onSubmit: false, // using a custom populate function
disableSelect: true
Then in the .click section of the row (around line 754) add a check for the property
$(this)
.click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
if (p.disableSelect) return true;
$(this).toggleClass('trSelected');
if (p.singleSelect) $(this).siblings().removeClass('trSelected');
}
)
Turns out you need to change the singleSelect property to true.
singleSelect: true
I know this thread is a bit old but I came upon it looking for the same thing. The singleSelect didn't work for me as I didn't want to be able to select any row. I found that I could remove any row selection with a single line of code:
$('.grid tr').unbind('click');
This a course removes all bindings on the table row so if you needed the binding you won't have it unless you rebind later but I needed to remove any and all row selection on my table. I didn't need to touch the flexigrid code to do so which I liked a bit more than previous answers.