Extjs implement the selection of Multi-Table custom query function foreground section (ext source code)

Main technologies used:
1. extjs2.0, overall framework
2. RemoteCheckboxGroup. js, used to dynamically generate table fields (for query results)
3. Ext. ux. grid. RowActions. js, used for grid row extension (move up, move down, delete, etc)
4. Datetime. js for Time Selection
5. MetaGrid. js is used to dynamically generate a list of query results (returned result Grid)
6. ehcache is used to cache custom table data, such as fixed information such as table name, field description, and length.
7. jxl. jar is used to output query results, and an Excel file is generated.
8. Java

The main code of EditGridPanel is as follows:Copy codeThe Code is 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 :{
// 'Focal ':
// 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: 'basicameid ',
Tpl: '<tpl for = ". "> <div ext: qtip =" {text} "class =" x-combo-list-item "> {text} </div> </tpl> ',
Mode: 'local ',
TriggerAction: 'all ',
Editable: false,
ValueField: 'value ',
DisplayField: 'text ',
LazyInit: false,
Listeners :{
'Expand': function (combo ){
Combo. clearValue ();
Combo. store. loadData (baseTableData );
}
, 'Select': function (){

}
, 'Focal ': function (){
This. expand ();
}
}
})),
Renderer: function (value, cellmeta, record, row, col, store ){
If (value = null | value = ""){
Return;
}
Return record. get ("tablenamestring ");
}}
, {Header: 'query condition 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', 'China'])
, BaseParams: {s_tablename: '0 '}
})
, Tpl: '<tpl for = ". "> <div ext: qtip =" {chinese} "class =" x-combo-list-item "> {chinese} </div> </tpl>'
, ValueField: 'name'
, DisplayField: 'China'
, Mode: 'remote'
, ForceSelection: true
, TriggerAction: 'all'
, TypeAhead: false
, SelectOnFocus: true
, Resizable: true
, Width: 120
, LazyInit: false
, Listeners :{
'Focal ':
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 :{
'Focal ':
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: 'pressvalue', 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 :{
'Focal ':
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 :{
'Focal ':
Function (){
This. expand ();
}
}
})),
Renderer: function (value, cellmeta, record ){
If (value = null | value = ""){
Return;
}
Return operatorSignComboData [value] [1];
}, Scope: this}
, This. rowActions

]);

Copy codeThe Code is 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: '20140901 ',
S_tablename: tables [I]. tableName,
SelectedTableColumns: selectedTableColumns
},
Reader: new Ext. data. JsonReader ({
TotalProperty: 'totalproperties ',
Root: 'LIST ',
Fields: [{name: 'fieldid'}, {name: 'fieldname'}, {name: 'fieldabel '}, {name: 'fieldval'}, {name: 'fieldchecked'}]
}),
FieldId: 'fieldid ',
FieldName: 'fieldname ',
FieldLabel: 'fieldabel ',
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: '20140901 ',
S_tablename: tables [I]. tableName,
SelectedTableColumns: selectedTableColumns
},
Reader: new Ext. data. JsonReader ({
TotalProperty: 'totalproperties ',
Root: 'LIST ',
Fields: [{name: 'fieldid'}, {name: 'fieldname'}, {name: 'fieldabel '}, {name: 'fieldval'}, {name: 'fieldchecked'}]
}),
FieldId: 'fieldid ',
FieldName: 'fieldname ',
FieldLabel: 'fieldabel ',
FieldValue: 'fieldvalue ',
FieldChecked: 'fieldchecked'
}]
});
This. items. add (myfieldset );
}
}
This. doLayout (true );
}
, Scope: this
, Failure: function (){
Alert ('loading error. Please confirm the network connection is normal! ');
}
});
}
});

Copy codeThe Code is 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 be wrong
Var field = this. colModel. getDataIndex (colIndex );
// Use the Store Manager to get a reference to the ComboBox store.
// The store that is passed as one of arguments to this renderer
// Function is the grid store. We need to cross reference the data
// With 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 shocould be 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 'today' + date. dateFormat ('G: I ');
}
D = d. add ('D',-6 );
If (d. getTime () <= notime ){
Return date. dateFormat ('d g: I ');
}
Return date. dateFormat ('n'/j g: I ');
},
/**
* 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 (cocould be
// We coshould display anything here
// "High", "Hi", "yup"... anything
Case "medium ":
Return "medium ";
Case "low ":
Return "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
})]
});
});

Download all JS packages and share advancedSearch.rar