I have a qx.ui.table.Table that becomes hard to read when a row takes focus. I'm using qx.ui.table.cellrenderer.Date as a base class to override a cell's background color though it doesn't appear this method gets called when
focusCellOnPointerMove : true fires events.
So, where is the table getting styled at when a row takes focus?
Here is my override:
// Overridden
_getCellStyle : function(cellInfo)
{
var diff = 5; // Example
if (diff < 60)
{
var color = '#8cff5e';
return this.base(arguments, cellInfo) + "background-color:" + color + ";";
} else if (diff < 60 * 5)
{
var color = '#ffff00';
return this.base(arguments, cellInfo) + "background-color:" + color + ";";
} else
{
return cellInfo.style || "";
}
},
Using suggestion by scro34:
If you just want to change a table row's background color when it's pointed at you can use qooxdoo's theming capabilities and override the color declaration which comes with the theme you've applied to your application.
The table widget uses two color keys to control the background color when the pointer is hovering over a row: table-row-background-focused (unselected row) and table-row-background-focused-selected (selected row).
To override the predefined values, open Color.js which is located in the "theme" folder of your application and add two entries to the "colors" section of the file, e.g.:
qx.Theme.define("myApp.theme.Color",
{
extend : qx.theme.indigo.Color,
colors :
{
"table-row-background-focused" : "#8cff5e",
"table-row-background-focused-selected" : "#ffff00"
}
});
More information about theming in qooxdoo: http://www.qooxdoo.org/current/pages/desktop/ui_theming.html
Tutorial on table styling: http://www.qooxdoo.org/5.0.1/pages/desktop/ui_table_styling.html
Related
Say I have a component with dialog drop to parsys on a content page /content/phonegap/ss/en_gb/login/home/test1/jcr:content/par/productimage
now inside the dialog i have something like
I wish to get $PATH append to URL and send selected device e.g the text 'Device ID:HTC_10_GOLD', to servlet in this dialog listener extjs:
<deviceAndColour
jcr:primaryType="cq:Widget"
allowBlank="{Boolean}false"
fieldLabel="Device and Colour"
name="./deviceAndColour"
options="/bin/reference/data/device.devices.json$PATH"
type="select"
xtype="selection">
<listeners
jcr:primaryType="nt:unstructured"
selectionchanged="function(pathfield) {
var selected = this.findParentByType('form').find('name', './deviceAndColour')[0].getText();
console.log( this.findParentByType('form').find('name', './deviceAndColour')[0].getText());
$.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json$PATH?selectedDevice=' + selected + '&colour=red', function(jsonData){
selectBox.setOptions(jsonData);
});
}" />
</deviceAndColour>
So bascially, the console.log( this.findParentByType('form').find('name', './deviceAndColour')[0].getText()); is not working as I expected, neither the $PATH inside the dialog listener js, it does not retrieve the path at all.
Apart from above attempt, I know var selected = this.findParentByType('form').find('name', './deviceAndColour')[0].getValue(); this will get the value asscociated with the select correctly, but I do not need value, I just wish to getText(), and get the current $PATH in extjs.
another questions, you may noticed $.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json$PATH?selectedDevice=' + selected + '&colour=red'
how do I skip the & in this listner, as if i use & directly, project won't even build. there must be someway to skip & and let extjs treat as part of the string to send request
Anyone expereinced this before? please suggest with code example.
Thanks
Getting the text of the option selected:
function(field,value){
for(var i = 0; i < field.options.length; i++) {
if(field.options[i].value === value) {
console.log('Selected: ' + field.options[i].text);
break;
}
}
}
Getting the path to the resource being edited:
function(field,value){
console.log("Resource:" + field.findParentByType("dialog").path);
}
Documentation: https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.Selection
UPDATE
Please try the following code adapted to your scenario (I also refactored the code to make use of params when providing query parameters. There is no reason why this shouldn't work.
function(field, value) {
var selected = '';
var path = field.findParentByType("dialog").path;
// get text of option selected
for(var i = 0; i < field.options.length; i++) {
if(field.options[i].value === value) {
selected = field.options[i].text;
break;
}
}
var params = {
selectedDevice: selected,
colour: 'red'
}
$.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json'+path, params, function(jsonData){
// FIXME: how are you getting the "selectBox" reference?
selectBox.setOptions(jsonData);
});
}
I'm trying to figure out a way to have an Excel-like behavior with the Grids on Ext JS.
Here is the sample grid I am working with. So far we can already naviguate through the cells with the arrows but only in edit mode.
However what I am trying to reach is the naviguation with the arrows, TAB and Enter keys outside of the edit mode, just like excel.
I tried to integrate this piece of code which overrides the Editor class, hoping that it would change the behavior of the cells but it doesn't change a thing.
I believe this is the most important part that overrides the Editor class and tries to include the keys input :
Ext.override(Ext.Editor, {
startEdit: function (el, value) {
var me = this,
field = me.field;
me.completeEdit();
me.boundEl = Ext.get(el);
value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;
if (!me.rendered) {
me.render(me.parentEl || document.body);
}
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
me.startValue = value;
me.show();
field.reset();
if (deleteGridCellValue) {
field.setValue('');
me.editing = true;
me.completeEdit();
deleteGridCellValue = false; // reset global variable
}
else {
if (newGridCellValue == '') {
// default behaviour of Ext.Editor (see source if needed)
field.setValue(value);
}
else {
// custom behaviour to handle an alphanumeric key press from non-edit mode
field.setRawValue(newGridCellValue);
newGridCellValue = ''; // reset global variable
if (field instanceof Ext.form.field.ComboBox) {
// force the combo box's filtered dropdown list to be displayed (some browsers need this)
field.doQueryTask.delay(field.queryDelay);
}
}
me.realign(true);
field.focus(false, 10);
if (field.autoSize) {
field.autoSize();
}
me.editing = true;
}
}
}
});
This is the first time that I am working on a project that is outside of Comp-Sci classes so any help would be very much appreciated. Thanks !
please look into following images let me know if you have any solution for it,
when I click on select all header checkbox (last column of grid) at that time if grid having row in collapse mode at that time all the record get selected but header checkbox remains unchecked but when I expand that particular record grid then header checkbox get selected please help me with it.
how can we get checked header checkbox while grid data in collapse mode.
enter image description here
enter image description here
Got an answer just override method onHeaderClick see commented lines,
`onHeaderClick: function(headerCt, header, e) {
if (header.isCheckerHd) {
e.stopEvent();
var me = this,
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
// Prevent focus changes on the view, since we're selecting/deselecting all records
me.preventFocus = true;
if (isChecked) {
me.deselectAll();
me.toggleUiHeader(false); // added
} else {
me.selectAll();
me.toggleUiHeader(true); // added
}
}
Please find code snippet below
addTreeGrid: function( view, type ) {
var me = this,
grid = null;
grid = Ext.create( 'widget.documentgrid', {
selModel: new Ext.selection.CheckboxModel({
injectCheckbox:'last',
checkOnly: true,
listeners : {//Issue # 7066 : t3281034
beforeselect : function(model, record, index){
if( record.get('status') === 'ANNL' ){
return false;
}
}
}
})
} );
I have overridden the hide column functionality of extjs which is working fine. When the column is given hidden:true, during first time page load my hide functionality is not working. When i do hide/show column, it is working. Need to have the same functionality enabled during page load too
columnhide: function() {
var cell = this.getEl().query('.x-grid-cell-inner');
var collen = grid.columns.length;
var i = 1;
for (var y = i; y < cell.length; y = y + collen) {
for (var x = 0; x < cell.length; x++) {
if (x == y) {
cell[x].style.display= "none";
}
}
}
}
You're right, the columnhide event fires only when a column is hidden after it has been rendered.
The simplest way to make your current code work would be to call hide() on the column, instead of using the hidden option.
Replacing hidden: true with the following in the column config will do the trick:
,listeners: {
// we want to catch the event only the first time it is fired
single: true
,afterrender: function() {
this.hide();
}
}
This code will add a listener to the column you want to hide, and after the column is rendered, it will call its hide() method. That will trigger your event, etc.
In my organization, each day has one of four shifts (A - D) working, and shifts are associated with colors (red, blue, green, yellow).
I use jQuery UI's datepicker in the desktop view of my ASP.NET MVC app, and I can use the beforeShowDay option to change the background color of days on the calendar so that users can see at a glance what shift is working each day.
$(".datePicker").datepicker('option', 'beforeShowDay', colorDays);
function colorDays(date) {
var today = new Date();
// set object to midnight, for comparing against passed in date
today.setHours(0,0,0,0);
var shift = getShift(date);
var cssClass = "";
// don't style unpickable dates in the past
if (date >= today) {
cssClass = "datepicker-shift-" + shift.toLowerCase();
}
return new Array(true, cssClass, shift + " Shift");
}
Is it possible to do the same with Mobiscroll, such that the Day wheel background would change color based on the shift that was working that day?
Alternatively, if that's not possible, changing the Day Label to include the name of the shift (A - D) would be OK.
I tried adding onChange to my mobiscroll instance:
$(".datePicker").mobiscroll().date({
theme: 'jqm',
onChange: function (valueText, inst) {
var date = new Date(valueText);
var shift = getShift(date);
inst.init({ dayText: "Day - " + shift });
}
});
The onChange event fires, but the mobiscroll widget closes immediately. If you re-open, the dayText label has correctly changed. I can't figure out how to change the label while keeping the widget open.
While I didn't end up changing wheel color, I found a way to change the label some time ago, and wanted to share for anyone that may want to do something similar. When instantiating mobiscroll, I use the following code:
$(".datePicker").mobiscroll().date({
theme: 'jqm',
display: 'bottom',
onChange: function(valueText, inst) {
var selectedDate = new Date(valueText);
$('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
},
onShow: function (html, valueText, inst) {
var selectedDate = new Date(valueText);
$('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
}
});
That gives me a label for the date/datetime picker that looks like "04/09/2014 - B shift", that updates as the selected date changes.