From b6d97974c5f40cf0dab7835380bc55e4d69e03a0 Mon Sep 17 00:00:00 2001
From: legac <renaud.legac@free.fr>
Date: Sat, 9 Nov 2013 19:56:40 +0100
Subject: [PATCH] ExtJS 4.2: gridwithfilter can be displayed but handlers are
not working.
---
models/widgets_grids.py | 2 +-
.../plugin_dbui/src/basepanelwithselector.js | 43 ++++++++++++-------
static/plugin_dbui/src/gridfilter.js | 38 ++++++++++++----
static/plugin_dbui/src/gridwithfilter.js | 40 +++++++----------
4 files changed, 72 insertions(+), 51 deletions(-)
diff --git a/models/widgets_grids.py b/models/widgets_grids.py
index 88946d7b..25002b45 100644
--- a/models/widgets_grids.py
+++ b/models/widgets_grids.py
@@ -16,7 +16,7 @@ gridModifier = dbui.GridModifier('categories')
gridModifier.configure_column('code', width=10)
gridModifier.set_rownumbering(False)
-# gridModifier.append_filter(('code', 'contains', T('bla bla...')))
+gridModifier.append_filter(('code', 'contains', T('bla bla...')))
# gridModifier.set_filters(plugins=['pFormToolTip'],
# width=300)
diff --git a/static/plugin_dbui/src/basepanelwithselector.js b/static/plugin_dbui/src/basepanelwithselector.js
index 06554445..894173bd 100644
--- a/static/plugin_dbui/src/basepanelwithselector.js
+++ b/static/plugin_dbui/src/basepanelwithselector.js
@@ -26,7 +26,7 @@ Ext.define('App.BasePanelWithSelector', {
/**
* @cfg {Object}
- * The panel configuration
+ * The main panel configuration
*/
panelCfg: null,
@@ -67,6 +67,11 @@ Ext.define('App.BasePanelWithSelector', {
*/
selectorSplit: true,
+ /**
+ * @cfg {String}
+ */
+ selectorTitle: "Selector",
+
/**
* @cfg {Number}
*/
@@ -84,6 +89,18 @@ Ext.define('App.BasePanelWithSelector', {
*/
resetButton: null,
+ /**
+ * @property {Ext.panel.Panel}
+ * reference to the mainPanel
+ */
+ mainPanel: null,
+
+ /**
+ * @property {Ext.panel.Panel}
+ * reference to the selectorPanel
+ */
+ selectorPanel: null,
+
// Private attribute for internationalization
textGo: 'Go',
textReset: 'Reset',
@@ -126,14 +143,15 @@ Ext.define('App.BasePanelWithSelector', {
text: this.textReset
}],
collapsible: this.selectorCollapsible,
- defaults: {anchor: '99%'},
frame: this.selectorFrame,
height: this.selectorHeight,
layout: 'form',
itemId: 'selectorPanel',
items: [selector],
+ bodyPadding: "0 5 0 0",
region: this.selectorRegion,
split: this.selectorSplit,
+ title: this.selectorTitle,
width: this.selectorWidth
};
@@ -154,23 +172,16 @@ Ext.define('App.BasePanelWithSelector', {
"use strict";
- var buttons,
- i;
+ var toolbar;
App.BasePanelWithSelector.superclass.initComponent.call(this);
- buttons = this.getComponent('selectorPanel').buttons;
-
- for (i = 0; i < buttons.length; i += 1) {
- switch (buttons[i].itemId) {
- case 'goButton':
- this.goButton = buttons[i];
- break;
+ // short cuts
+ this.mainPanel = this.getComponent('mainPanel');
+ this.selectorPanel = this.getComponent('selectorPanel');
- case'resetButton':
- this.resetButton = buttons[i];
- break;
- }
- }
+ toolbar = this.selectorPanel.getDockedItems()[0];
+ this.goButton = toolbar.getComponent('goButton');
+ this.resetButton = toolbar.getComponent('resetButton');
}
});
\ No newline at end of file
diff --git a/static/plugin_dbui/src/gridfilter.js b/static/plugin_dbui/src/gridfilter.js
index 86d6017d..19f0efeb 100644
--- a/static/plugin_dbui/src/gridfilter.js
+++ b/static/plugin_dbui/src/gridfilter.js
@@ -9,7 +9,7 @@ Ext.define('App.grid.GridFilter', {
extend: 'Ext.form.FieldSet',
alias: 'widget.xgridfilter',
- // Private object containing where clause related to the filter resquest
+ // Private object containing where clause related to the filter request
filterConditions: {},
// Private reference to the paging toolBar
@@ -24,7 +24,7 @@ Ext.define('App.grid.GridFilter', {
// the enableKeyEvents is mandatory for Ext.form.TextField
//
defaults: {
- anchor: '99%',
+ anchor: '100%',
enableKeyEvents: true
},
@@ -40,6 +40,27 @@ Ext.define('App.grid.GridFilter', {
// initialise the underlying class.
App.grid.GridFilter.superclass.initComponent.call(this);
+ // associate handlers to fields
+ this.items.each(function (item, index, len) {
+
+ if (!item.isFormField) {
+ return;
+ }
+
+ switch (item.getXType()) {
+
+ case 'xcombobox':
+ break;
+
+ case 'datefield':
+ break;
+
+ default:
+ item.on('keyup', this.onChange, this, {buffer: 500});
+ break;
+ }
+ });
+ /*
// associate handlers to fields
fields = this.findByType('field');
for (i = 0; i < fields.length; i += 1) {
@@ -58,7 +79,7 @@ Ext.define('App.grid.GridFilter', {
} else {
field.on('keyup', this.onChange, this, {buffer: 500});
}
- }
+ } */
},
// private method requires by the Ext JS component model
@@ -155,13 +176,12 @@ Ext.define('App.grid.GridFilter', {
"use strict";
- var fields = this.findByType('field'),
- i;
-
// reset the field values
- for (i = 0; i < fields.length; i += 1) {
- fields[i].reset();
- }
+ this.items.each(function (item, index, len) {
+ if (item.isFormField) {
+ item.reset();
+ }
+ });
// reset filter conditions
this.filterConditions = {};
diff --git a/static/plugin_dbui/src/gridwithfilter.js b/static/plugin_dbui/src/gridwithfilter.js
index def90c27..7ca13f82 100644
--- a/static/plugin_dbui/src/gridwithfilter.js
+++ b/static/plugin_dbui/src/gridwithfilter.js
@@ -7,34 +7,34 @@ Ext.define('App.grid.GridWithFilter', {
extend: 'App.BasePanelWithSelector',
alias: 'widget.xgridwithfilter',
+ // private short cuts
+ filter: null,
+ grid: null,
+
// private method require by the Ext JS component model
initComponent: function () {
"use strict";
- var filter,
- grid,
- selectorPanel;
-
// collapse the grid filter panel
//this.items[1].collapsed = true;
App.grid.GridWithFilter.superclass.initComponent.call(this);
+
// bind the filter to the grid
- filter = this.find('xtype', 'xgridfilter')[0];
- grid = this.find('xtype', 'xgrid')[0];
- filter.bind(grid);
+ this.filter = this.selectorPanel.child('xgridfilter');
+ this.grid = this.mainPanel.child('xgrid');
+ this.filter.bind(this.grid);
// connect buttons
this.goButton.hide();
- this.resetButton.on('click', filter.onReset, filter);
+ this.resetButton.on('click', this.filter.onReset, this.filter);
// collapse the selectorPanel
// refresh the grid when the selectorPanel is collapsed
- selectorPanel = this.getComponent('selectorPanel');
- selectorPanel.collapsed = true;
- selectorPanel.on('collapse', this.onCollapse, this);
+ this.selectorPanel.collapsed = true;
+ this.selectorPanel.on('collapse', this.onCollapse, this);
},
// private method requires by the Ext JS component model
@@ -42,18 +42,9 @@ Ext.define('App.grid.GridWithFilter', {
"use strict";
- var filter,
- grid,
- selectorPanel;
-
- filter = this.find('xtype', 'xgridfilter')[0];
- this.resetButton.un('click', filter.onReset, filter);
-
- grid = this.find('xtype', 'xgrid')[0];
- grid.un('resetgrid', filter.reset, filter);
-
- selectorPanel = this.getComponent('selectorPanel');
- selectorPanel.un('collapse', this.onCollapse, this);
+ this.resetButton.un('click', this.filter.onReset, this.filter);
+ this.grid.un('resetgrid', this.filter.reset, this.filter);
+ this.selectorPanel.un('collapse', this.onCollapse, this);
App.grid.GridWithFilter.superclass.beforeDestroy.call(this);
},
@@ -65,7 +56,6 @@ Ext.define('App.grid.GridWithFilter', {
"use strict";
- var grid = this.find('xtype', 'xgrid')[0];
- grid.getView().refresh();
+ this.grid.getView().refresh();
}
});
\ No newline at end of file
--
GitLab