Commit faa17bbb authored by LE GAC Renaud's avatar LE GAC Renaud
Browse files

Merge branch '32-gridwithfilter-go-button' into 'master'

Resolve "revisit the UI of the GridWithFilter"

Closes #32

See merge request !42
parents acea1a58 70209c12
......@@ -2,6 +2,10 @@
HEAD
- Minor release
- Improve the user interface of the GridWithFilter component.
It is now possible to trigger the grid filtering by pressing th Go button.
0.9.8.3 (Oct 2017)
- Minor release.
- Update linked comboBox to sort displayed values in alphabetic order.
......
0.9.8.2
\ No newline at end of file
0.9.8.3
\ No newline at end of file
......@@ -46,6 +46,29 @@ Ext.define("Dbui.grid.Filter", {
}
},
/**
* @cfg{number} dateFieldBufferChange
* Reschedule the handler "onChange" after the specifed nunmber of
* milliseconds. If the event fires again within that time,
* the original handler is not invoked, but the new handler
* is scheduled in its place. This parameter is used for fields:
* "numberfield", "textfield", "textarea" and "textareafield".
*
*/
dateFieldBufferChange: 2000,
/**
* @cfg{number} textFieldBufferChange
* Reschedule the handler "onChange" after the specifed nunmber of
* milliseconds. If the event fires again within that time,
* the original handler is not invoked, but the new handler
* is scheduled in its place. This parameter is used for fields:
* "datefield" and "timefield".
*
*/
textFieldBufferChange: 1000,
// Private object containing where clause related to the filter request.
// this is used when running with a buffered store.
filterConditions: {},
......@@ -72,9 +95,6 @@ Ext.define("Dbui.grid.Filter", {
// initialise the base class
me.callParent(arguments);
// setup trigers
me.setTrigger();
},
// private method requires by the Ext JS component model
......@@ -94,8 +114,11 @@ Ext.define("Dbui.grid.Filter", {
/**
* Bind the grid filter to the grid
* @param {Ext.grid.Panel} grid
* @param {Boolean} onChange
* Grid filtering is activate as soon as one field of the selector
* change (true) or when the Go button is pressed (false)
*/
bind: function (grid) {
bind: function (grid, onChange) {
"use strict";
......@@ -105,6 +128,11 @@ Ext.define("Dbui.grid.Filter", {
me.grid = grid;
// setup triggers when the content of one field is change
if (onChange) {
me.setTrigger();
}
// clicking the reset button of the grid reset the filter's fields.
if (buttons && buttons[0] && buttons[0].menu) {
buttonReset = buttons[0].menu.getComponent("buttonReset");
......@@ -249,6 +277,27 @@ Ext.define("Dbui.grid.Filter", {
}
},
/**
* Handler to filter the store by using field values
*
*/
onGo: function() {
"use strict";
var me = this;
if (me.grid.remoteAction) {
Dbui.getFields(me).forEach(function (field) {
me.remoteFiltering(field);
});
} else {
Dbui.getFields(me).forEach(function (field) {
me.localFiltering(field);
});
}
},
/**
* Handler to reset the filter and the store content
*/
......@@ -264,6 +313,9 @@ Ext.define("Dbui.grid.Filter", {
// reset the grid
me.grid.reset();
// focus on the first field
me.child("field").focus();
},
/**
......@@ -349,7 +401,7 @@ Ext.define("Dbui.grid.Filter", {
case "datefield":
case "timefield":
field.on("change", me.onChange, me, {
buffer: 1000
buffer: me.dateFieldBufferChange
});
break;
......@@ -358,7 +410,7 @@ Ext.define("Dbui.grid.Filter", {
case "textarea":
case "textareafield":
field.on("change", me.onChange, me, {
buffer: 500
buffer: me.textFieldBufferChange
});
break;
......
......@@ -15,10 +15,22 @@ Ext.define("Dbui.panel.GridWithFilter", {
"Ext.LoadMask"
],
/**
* @cfg {Boolean}
* Filter the grid as soon as one field of the selector is changed
* otherwise when the Go button is pressed
*/
filterOnChange: false,
// private short cuts
filter: null,
grid: null,
// private key map
keyMap: {
ENTER: "onEnterKey"
},
// Private properties for internationalization
textLoad: "Loading...",
......@@ -35,14 +47,22 @@ Ext.define("Dbui.panel.GridWithFilter", {
// bind the filter to the grid
me.filter = me.selectorPanel.child("xgridfilter");
me.grid = me.mainPanel.child("xgrid");
me.filter.bind(me.grid);
me.filter.bind(me.grid, me.filterOnChange);
// connect buttons
if (me.filterOnChange) {
me.keyMapEnabled = false;
me.goButton.hide();
} else {
me.goButton.on("click", me.filter.onGo, me.filter);
}
me.resetButton.on("click", me.filter.onReset, me.filter);
// collapse the selectorPanel
me.selectorPanel.collapsed = true;
me.selectorPanel.on("expand", me.onSelectorExpand, me);
// Mask the GridFilter during loading
me.grid.getView().loadMask = Ext.create("Ext.LoadMask", {
......@@ -57,9 +77,47 @@ Ext.define("Dbui.panel.GridWithFilter", {
var me = this;
if (!me.filterOnChange) {
me.goButton.un("click", me.filter.onGo, me.filter);
}
me.selectorPanel.un("expand", me.onSelectorExpand, me);
me.resetButton.un("click", me.filter.onReset, me.filter);
me.callParent(arguments);
}
},
// jshint strict: true
/**
* Handler to click on the Go button when the ENTER key is pressed
*
*/
onEnterKey: function () {
"use strict";
var me = this;
// do it only when the panel is expanded but not collpased
if (!me.selectorPanel.getCollapsed()) {
me.goButton.click();
}
},
/**
* Handler to focus on the first field of the filter
* when the selector is expand
*
*/
onSelectorExpand: function () {
"use strict";
var me = this,
firstField = me.filter.child("field");
if (Ext.isEmpty(firstField)) {
return;
}
firstField.focus();
}
});
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment