Commit 7cab2bb8 authored by Renaud Le Gac's avatar Renaud Le Gac
Browse files

Develop App.BasePanelWithSelector, App.PanelWithUrlSelector and modify

App.grid.GridWithFilter
 - Improve the display of App.GridWithFilter by moving anchor to 99%.
 - The class GridWithFilter inherit from PanelwithSelector
 - cvtSvc and cfg_configurable_url_panel follows evolution
parent 5fa5ad43
......@@ -42,4 +42,10 @@ def report_2():
"""Return the url arguments
"""
return 'report_2: '+str(request.args)
\ No newline at end of file
print request.post_vars
s = ""
for k in request.post_vars:
s += "<br>%s: %s" % (k, request.post_vars[k])
return '<h3>report_2</h3>'+s
\ No newline at end of file
......@@ -13,7 +13,7 @@ dummy = DAL(None)
# the report node with selector
dummy.define_table("foo1",
Field('my_string'),
Field('my_int', requires=IS_INT_IN_RANGE(0, 100)),
Field('my_date', requires=IS_DATE()),
Field('my_string', 'string'),
Field('my_int', 'integer', requires=IS_INT_IN_RANGE(0, 100)),
Field('my_date', 'date'),
Field('my_list', requires=IS_IN_SET(['a', 'b', 'c'])))
......@@ -428,8 +428,8 @@ class CvtSvc(BaseSvc):
# grid with filter
filter = self.to_grid_filter(table)
if filter:
cfg = {'filterCfg': filter,
'gridCfg': dict(cfg),
cfg = {'panelCfg': dict(cfg),
'selectorCfg': filter,
'xtype': 'xgridwithfilter'}
return cfg
......
......@@ -21,21 +21,25 @@ def cfg_configurable_url_panel(key, value):
value
tuple containing a well form URL string
and a gluon.dal.Table build the form allowing to setup
the URL arguments
and a list of configuration dictionary defining each items
embedded in the form.
"""
url, table = value
url, cfg_form_items = value
cfg = {'panelCfg': None,
cfg = {'baseUrl': url,
'panelCfg': None,
'selectorCfg':None,
'xtype': 'xpanelwithselector'}
'xtype': 'xpanelwithurlselector'}
cfg['panelCfg'] = {'baseUrl': url,
'plugins': ['pPanelMathJax'],
'preventBodyReset': True}
cfg['panelCfg'] = {'plugins': ['pPanelMathJax'],
'preventBodyReset': True,
'xtype': 'panel'}
cfg['selectorCfg'] = {}
cfg['selectorCfg'] = {'defaults': {'anchor': '99%'},
'items': cfg_form_items,
'title': 'Configure',
'xtype': 'fieldset'}
return cfg
......
/**
* A border layout with a panel and an url selector
* A border layout with a panel and a selector.
*
* The selector is a collapsible panel appearing on the right side.
* It contains a set of Fields usually organized in field sets.
* By default the selector contains two buttons Go and Reset.
*
* The logic between the panel, the selector and the buttons
* is defined in inherited class.
*
* The type of this component is xpanelwithselector.
*
* @extend: Ext.Panel
*
*/
Ext.namespace('App.panel');
Ext.namespace('App');
App.panel.PanelWithSelector = Ext.extend(Ext.Panel, {
App.BasePanelWithSelector = Ext.extend(Ext.Panel, {
/**
* @param {String} base url to be displayed in the panel
* @param {Object} panel and selector configurations
*/
panelCfg: null,
selectorCfg: null,
/**
* Private attribute for internationalization
*/
textGo: 'Go',
textReset: 'Reset',
/**
* constructor
* @param {Object} config
*/
constructor: function(config){
var cfg;
var cfg,
panel,
selector;
Ext.apply(this, config);
panel = Ext.ComponentMgr.create(this.panelCfg);
selector = Ext.ComponentMgr.create(this.selectorCfg);
// predefined configuration of the panel
cfg = {
layout: 'border',
items: [{
autoScroll: true,
border: false,
defaults: {
layout: 'fit'
},
itemId: 'urlPanel',
layout: 'fit',
itemId: 'mainPanel',
items: [panel],
region: 'center',
}, {
autoScroll: true,
buttons: [{
buttons: [{
ref: '../../goButton',
text: this.textGo
}, {
ref: '../../resetButton',
text: this.textReset
}],
}],
collapsible: true,
defaults: {anchor: '99%'},
frame: true,
layout: 'form',
itemId: 'urlConfigurator',
itemId: 'selectorPanel',
items: [selector],
region: 'east',
split: true,
width: 200,
width: 300,
}]
};
// apply user panel configuration
Ext.apply(cfg, config.panelCfg);
// apply user selector cnonfiguration
Ext.apply(cfg, config.selectorCfg);
// instanciate the panel
Ext.apply(this, cfg);
App.panel.PanelWithSelector.superclass.constructor.call(this);
// handlers
this.goButton.on('click', this.onGo, this);
},
/**
* handle to build the URL and to load it in the panel
*/
onGo: function() {
var urlconfigurator = this.getComponent('urlConfigurator'),
urlPanel = this.getComponent('urlPanel');
// buil the url
// load the url in the panel
console.log('onGo', this.baseUrl, urlPanel);
urlPanel.load({
url: this.baseUrl,
text: 'Loading...',
timeout: 30
});
// instanciate the panel
App.BasePanelWithSelector.superclass.constructor.call(this);
}
});
Ext.reg('xpanelwithselector', App.panel.PanelWithSelector);
\ No newline at end of file
Ext.reg('xpanelwithselector', App.BasePanelWithSelector);
\ No newline at end of file
......@@ -43,7 +43,7 @@ App.grid.GridFilter = Ext.extend(Ext.form.FieldSet, {
* the enableKeyEvents is mandatory for Ext.form.TextField
*/
defaults: {
anchor: '100%',
anchor: '99%',
enableKeyEvents: true
},
......
......@@ -7,67 +7,25 @@
*/
Ext.namespace('App.grid');
App.grid.GridWithFilter = Ext.extend(Ext.Panel, {
App.grid.GridWithFilter = Ext.extend(App.BasePanelWithSelector, {
/**
* filter and grid configurations
*/
filterCfg: null,
gridCfg: null,
/**
* Private attribute for internationalization
*/
textReset: 'Reset',
/**
* constructor
* @param {Object} config
*/
constructor: function(config) {
initComponent: function() {
var cfg,
filter,
var filter,
grid;
Ext.apply(this, config);
// instanciate the grid and it filte and grid
grid = Ext.ComponentMgr.create(this.gridCfg);
filter = Ext.ComponentMgr.create(this.filterCfg);
// collpase the grid filter panel
this.items[1].collapsed = true;
App.grid.GridWithFilter.superclass.initComponent.call(this);
// bind the filter to the grid
filter = this.findByType('xgridfilter')[0];
grid = this.findByType('xgrid')[0];
filter.bind(grid);
// predefined configuration of the panel
cfg = {
border: false,
layout: 'border',
items: [{
items: [grid],
layout: 'fit',
region: 'center'
}, {
buttons: [{
text: this.textReset,
ref: '../../resetButton'
}],
collapsible: true,
collapsed: true,
defaults: {anchor: '100%'},
frame: true,
items: [filter],
layout: 'form',
region: 'east',
split: true,
width: 300
}]
};
Ext.apply(this, cfg);
// instanciate the panel
App.grid.GridWithFilter.superclass.constructor.call(this);
// connect the reset button
// connect buttons
this.goButton.hide();
this.resetButton.on('click', filter.onReset, filter);
}
});
......
/**
* A panel displaying an url content with an collpasible selector.
* the selector allow to setup the url parameters and to launch the
* request to the server.
*
* The type of this component is xpanelwithurlselector.
*
* @extend: App.PanelWithSelector
*
*/
Ext.namespace('App');
App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
/**
* @param {String}
*/
baseUrl: null,
/**
* Require by the ExtJS model
*/
initComponent: function () {
App.PanelWithUrlSelector.superclass.initComponent.call(this);
// connect the buttons
this.goButton.on('click', this.onGo, this);
this.resetButton.on('click', this.onReset, this);
},
/**
* handle to build the URL and to load it in the panel
*/
onGo: function() {
var fields,
i,
panel = this.getComponent('mainPanel'),
params = {},
selector = this.getComponent('selectorPanel');
fields = selector.findByType('field');
for (i = 0; i < fields.length; i += 1) {
params[fields[i].getName()] = fields[i].getValue();
}
panel.load({
url: this.baseUrl,
params: params,
text: 'Loading...',
timeout: 30
});
},
/**
* Handler to reset the selector
*/
onReset: function () {
var fields,
i,
selector = this.getComponent('selectorPanel');
fields = selector.findByType('field');
for (i = 0; i < fields.length; i += 1) {
fields[i].reset();
}
}
});
Ext.reg('xpanelwithurlselector', App.PanelWithUrlSelector);
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