The main technology used:
1, extjs2.0, the overall framework
2, Remotecheckboxgroup.js, for dynamic generation of table fields (for query results to use)
3, Ext.ux.grid.RowActions.js, for grid line expansion (move up and remove delete, etc.)
4, Datetime.js, for time selection
5, Metagrid.js for dynamic generation of Query results list (return the result grid)
6, Ehcache used to cache custom table data, such as table name, field description, length and other fixed information
7, Jxl.jar for query results output, the final generation of Excel file
8, Java
Editgridpanel main code is as follows:
Copy Code code as follows:
{header: ' parentheses ', dataindex: ' Leftbrackets ', Width:40,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
Store:new Ext.data.SimpleStore ({
fields:[' value ', ' text '],
Data:leftbracketscombodata
}),
Mode: ' Local ',
TriggerAction: ' All ',
Editable:false,
Valuefield: ' Value ',
Displayfield: ' Text ',
Readonly:true
Lazyinit:false,
Listeners: {
' Focus ':
function () {
This.expand ();
// }
// }
})),
Renderer:function (value, Cellmeta, record) {
if (value = NULL | | value = = "") {
Return "";
}
return leftbracketscombodata[value][1];
},scope:this}
, {header: ' table name ', Dataindex: ' tablename ', Width:80,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
Store:new Ext.data.SimpleStore ({
fields:[' value ', ' text '],
Data:basetabledata
}),
ID: ' Basetablenameid ',
TPL: ' <tpl for= '. ><div ext:qtip= "{text}" class= "X-combo-list-item",
Mode: ' Local ',
TriggerAction: ' All ',
Editable:false,
Valuefield: ' Value ',
Displayfield: ' Text ',
Lazyinit:false,
Listeners: {
' Expand ': function (combo) {
Combo.clearvalue ();
Combo.store.loadData (Basetabledata);
}
, ' SELECT ': function () {
}
, ' Focus ': function () {
This.expand ();
}
}
})),
Renderer:function (value, Cellmeta, record, row, col, store) {
if (value = NULL | | value = = "") {
Return
}
Return Record.get ("tablenamestring");
}}
, {header: ' Query Criteria column ', Dataindex: ' fieldname ', Width:90,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
ID: ' Fieldnameid '
, Store:new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({url: ' ... /searchtablecolumns/extlistkv.do '})
, Reader:new Ext.data.JsonReader ({}, [' Name ', ' Chinese '])
, Baseparams:{s_tablename: ' 0 '}
})
, TPL: ' <tpl for= '. ><div ext:qtip= "{Chinese}" class= "X-combo-list-item" >{chinese}</div></tpl> "
, Valuefield: ' Name '
, Displayfield: ' Chinese '
, mode: ' Remote '
, Forceselection:true
, triggeraction: ' All '
, Typeahead:false
, Selectonfocus:true
, Resizable:true
, width:120
, Lazyinit:false
, listeners: {
' Focus ':
function () {
This.expand ();
}
}
}
)),
Renderer:function (value, Cellmeta, record, row, col, store) {
if (value = NULL | | value = = "") {
Return "";
}
Return Record.get ("fieldnamestring");
}}
, {header: ' logical operator ', Dataindex: ' Relationsign ', Width:70,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
Store:new Ext.data.SimpleStore ({
fields:[' value ', ' text '],
Data:relationsigncombodata
}),
Mode: ' Local ',
TriggerAction: ' All ',
Editable:false,
Valuefield: ' Value ',
Displayfield: ' Text ',
Readonly:true,
Lazyinit:false,
Listeners: {
' Focus ':
function () {
This.expand ();
}
}
})),
Renderer:function (value, Cellmeta, record, row, col, store) {
if (value = NULL | | value = = "") {
Return
}
return relationsigncombodata[value][1];
},scope:this}
, {header: ' Query condition value ', Dataindex: ' Expressvalue ', Width:125,editor:new Ext.grid.GridEditor (new Ext.form.TextField ({}))
, Renderer:function (value, Cellmeta, record, row, col, store) {
if (value = NULL | | value = = "") {
Return "";
}
Return Record.get ("expressvaluestring");
}
}
, {header: ' parentheses ', dataindex: ' Rightbrackets ', Width:40,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
Store:new Ext.data.SimpleStore ({
fields:[' value ', ' text '],
Data:rightbracketscombodata
}),
Mode: ' Local ',
TriggerAction: ' All ',
Editable:false,
Valuefield: ' Value ',
Displayfield: ' Text ',
Readonly:true,
Lazyinit:false,
Listeners: {
' Focus ':
function () {
This.expand ();
}
}
})),
Renderer:function (value, Cellmeta, record) {
if (value = NULL | | value = = "") {
Return "";
}
return rightbracketscombodata[value][1];
},scope:this}
, {header: ' relational operator ', Dataindex: ' Operatorsign ', Width:70,editor:new Ext.grid.GridEditor (new Ext.form.ComboBox ({
Store:new Ext.data.SimpleStore ({
fields:[' value ', ' text '],
Data:operatorsigncombodata
}),
Mode: ' Local ',
TriggerAction: ' All ',
Editable:false,
Valuefield: ' Value ',
Displayfield: ' Text ',
Readonly:true,
Lazyinit:false,
Listeners: {
' Focus ':
function () {
This.expand ();
}
}
})),
Renderer:function (value, Cellmeta, record) {
if (value = NULL | | value = = "") {
return;
}
return operatorsigncombodata[value][1];
},scope:this}
, this.rowactions
]);
Copy Code code as follows:
Ext.namespace (' com.awd ');
Ext.namespace (' Com.awd.advancedSearch ');
Com.awd.advancedSearch.tableGroup = Ext.extend (Ext.form.FormPanel, {
Initcomponent:function () {
Ext.apply (This, {
Border:true,
Buttonalign: ' Right ',
Bodystyle: ' padding:5px;overflow-y:scroll;border-left:1px solid #8DB2E3 '
});
Com.awd.advancedSearch.tableGroup.superclass.initComponent.apply (this,arguments);
}
, Loadtablefield:function (selectedtablecolumns) {
Ext.Ajax.request ({
URL: '.. /advancedsearch/getdisplaytables.do ',
Method: ' Post ',
Params:{tablenames:basetabledata.tostring ()},
Success:function (Request) {
var tables = Ext.decode (Request.responsetext);
var myfieldset = null;
if (This.items.length = = 0) {
for (var i = 0; i < tables.length; i++) {
Myfieldset = new Ext.form.FieldSet ({
Title:tables[i].tablestring
, Collapsible:true
, Autoheight:true
, Layout: ' column '
, Items: [
{xtype: ' Remotecheckboxgroup ',
Columns:5,
URL: '.. /searchtablecolumns/extlistasfielddisplay.do ',
Baseparams: {
Dir: ' ASC ',
Limit: ' 150 ',
S_tablename:tables[i].tablename,
Selectedtablecolumns:selectedtablecolumns
},
Reader:new Ext.data.JsonReader ({
Totalproperty: ' Totalproperty ',
Root: ' list ',
Fields: [{name: ' FieldID '},{name: ' FieldName '},{name: ' Fieldlabel '},{name: ' Fieldvalue '},{name: ' fieldchecked '}]
}),
FieldID: ' FieldID ',
FieldName: ' FieldName ',
Fieldlabel: ' Fieldlabel ',
Fieldvalue: ' Fieldvalue ',
fieldchecked: ' fieldchecked '
}]
});
This.items.add (Myfieldset);
}
}else{
for (var j = 0; J < Tables.length; J + +) {
This.remove (0);
}
for (var i = 0; i < tables.length; i++) {
Myfieldset = new Ext.form.FieldSet ({
Title:tables[i].tablestring
, Collapsible:true
, Autoheight:true
, Layout: ' column '
, Items: [
{xtype: ' Remotecheckboxgroup ',
Columns:5,
URL: '.. /searchtablecolumns/extlistasfielddisplay.do ',
Baseparams: {
Dir: ' ASC ',
Limit: ' 150 ',
S_tablename:tables[i].tablename,
Selectedtablecolumns:selectedtablecolumns
},
Reader:new Ext.data.JsonReader ({
Totalproperty: ' Totalproperty ',
Root: ' list ',
Fields: [{name: ' FieldID '},{name: ' FieldName '},{name: ' Fieldlabel '},{name: ' Fieldvalue '},{name: ' fieldchecked '}]
}),
FieldID: ' FieldID ',
FieldName: ' FieldName ',
Fieldlabel: ' Fieldlabel ',
Fieldvalue: ' Fieldvalue ',
fieldchecked: ' fieldchecked '
}]
});
This.items.add (Myfieldset);
}
}
This.dolayout (TRUE);
}
, Scope:this
, Failure:function () {
Alert (' Load error, make sure the network connection is OK! ');
}
});
}
});
Copy Code code as follows:
Ext.apply (EXT, {
Isfirebug: (window.console && Window.console.firebug)
});
Ext.ns (' app ');
App.getmetagrid = function (config) {
return new Ext.ux.grid.MetaGrid (Ext.apply ({
Baseparams:null,
/**
* @cfg {String} URL specify the URL to the data object (server side
* script) from which to load data through the Httpproxy.
*/
URL: '.. /advancedsearch/extsearchresultlist.do?ssid= ' +globalquerystring ("SSID"),
URL: ' Meta-data.js ',
Renderchange:function (val) {
if (val > 0) {
Return ' <span style= ' color:green; > ' + val + ' </span> ';
else if (Val < 0) {
Return ' <span style= ' color:red; > ' + val + ' </span> ';
}
return Val;
},
Rendercombo:function (Val, metadata, record, RowIndex, Colindex, store) {
var data;
/*
The field name:
var field = Record.fields.items[colindex].name; Unreliable since colindex may wrong
var field = This.colModel.getDataIndex (Colindex);
Use the store Manager-to-get-reference to the ComboBox store.
The store is passed as one of arguments to this renderer
The function is the grid store. We need to cross reference the data
The ComboBox store, not the grid store.
Get a registered store using the ID of the store
var storeId = field;
var combostore = Ext.StoreMgr.lookup (storeId);
if (!combostore) {
Combostore = new App.combostore (storeId);
}
var Comborecord = Combostore.getbyid (val);
if (Comborecord) {
data = ComboRecord.data.displayField;
}
else {
data = data;//' missing data ';
}
*/
Return the value that should is rendered into the grid cell
return data;
},
/**
* Date renderer function
* Renders a date
*/
Renderdate:function (date) {
Return date? Date.dateformat (' M D, Y '): ';
},
Renderdatetime:function (date) {
if (!date) {
Return ";
}
var now = new Date ();
var d = Now.cleartime (true);
var notime = Date.cleartime (True). GetTime ();
if (Notime = = D.gettime ()) {
Return to ' Today ' + date.dateformat (' g:i a ');
}
D = d.add (' d ',-6);
if (D.gettime () <= notime) {
Return Date.dateformat (' D g:i a ');
}
Return Date.dateformat (' n/j g:i a ');
},
/**
* Italic Custom renderer function
* Takes Val and renders it in italics
* @param {Object} val
*/
Renderitalic:function (data, metadata, record, RowIndex, ColumnIndex, store) {
Return ' <i> ' + data + ' </i> ';
},
/**
* Percent Custom renderer function
* takes ' data ' and renders it red or green with%
*/
Renderpctchange:function (data, metadata, record, RowIndex, ColumnIndex, store) {
var p = (parsefloat (data) * 100.0). toFixed (1);
var qtip = ' > ';
if (data >= 0) {
Meta.css = ' green-cls ';
Qtip = "qtip= ' Yeah '/>";
Return ' <span style= ' color:green; "' + qtip + data + '%</span> ';
else if (data < 0) {
Meta.css = ' red-cls ';
Qtip = "qtip= ' woops '/>";
Return ' <span style= ' color:red; "' + qtip + data + '%</span> ';
}
Css:
. red-cls {color:red}
. green-cls {Color:green}
return data;
},
/**
* Red/green Custom renderer function
* Takes Val and renders it red if <0 otherwise renders it green
* @param {Object} val
*/
Renderposneg:function (data, metadata, record, RowIndex, ColumnIndex, store) {
if (data >= 0) {
Return ' <span style= ' color:green; > ' + data + ' </span> ';
else if (data < 0) {
Return ' <span style= ' color:red; > ' + data + ' </span> ';
}
return data;
},
/**
* Risk Custom renderer function
* Renders according to risk level
* @param {Object} val
*/
Renderrisk:function (data, metadata, record, RowIndex, ColumnIndex, store) {
Switch (data) {
Case "High":
Metadata.css = "Redcell";
return "high";//display ' high ' in the cell (could is
We could display anything here
"High", "Hi", "Yup" ... anything
Case "Medium":
Return "Medium";
Case "Low":
Return to "low";
Default
return data;
}
},
/**
* Star Custom renderer function
* Renders a picture according to value
* @param {Object} val
*/
Renderstars:function (data, metadata, record, RowIndex, ColumnIndex, store) {
Switch (data) {
Case "1":
Metadata.css = "Stars1";
Return 1;//returns text over the background image
Case "2":
Metadata.css = "Stars2";
Return;//just shows the background image
Case "3":
Metadata.css = "Stars3";
Return
Case "4":
Metadata.css = "STARS4";
Return
Case "5":
Metadata.css = "STARS5";
Return
Default
return data;
}
}
, Renderqtip:function (data, metadata, record, RowIndex, ColumnIndex, store) {
metadata.attr = ' ext:qtip= ' + data + ' ";
return data;
}
}, config));
};
Ext.onready (function () {
var VP = new Ext.viewport ({
Layout: ' Fit ',
Items: [App.getmetagrid ({
Border:false
})]
});
});
All JS packages Download share Advancedsearch.rar
