+++ /dev/null
-<html>
-<head>
-<title>Array Grid Example With Filter</title>
-<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
-<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
-<script type="text/javascript" src="../../ext-all-debug.js"></script>
-<link rel="stylesheet" type="text/css" href="grid-examples.css" />
-<link rel="stylesheet" type="text/css" href="../examples.css" />
-<style type="text/css">
-.x-filter-condition td {
- padding: 4px;
-}
-
-.add-button {
- background: url(../shared/icons/fam/add.gif)!important;
-}
-
-.delete-button {
- background: url(../shared/icons/fam/bin.png)!important;
-}
-
-.condition-row-disabled {
- background: url(../shared/icons/fam/delete.gif)!important;
-}
-
-.condition-row-enabled {
- background: url(../shared/extjs/images/checked.gif)!important;
-}
-
-</style>
-<script type="text/javascript">
-Ext.ux.FilterCondition = Ext.extend(Ext.Container, {
- layout: 'table',
-
- layoutConfig: {
- columns: 9
- },
-
- autoEl: {
- cls: 'x-filter-condition'
- },
-
- Field: Ext.data.Record.create(['name', 'type']),
-
- initComponent: function() {
- this.fields = this.store.reader.recordType.prototype.fields;
- this.fieldStore = new Ext.data.Store();
-
-// Create a Store containing the field names and types
-// in the passed Store.
- this.fields.each(function(f) {
- this.fieldStore.add(new this.Field(f))
- }, this);
-
-// Create a Combo which allows selection of a field
- this.fieldCombo = new Ext.form.ComboBox({
- triggerAction: 'all',
- store: this.fieldStore,
- valueField: 'name',
- displayField: 'name',
- editable: false,
- forceSelection: true,
- mode: 'local',
- listeners: {
- select: this.onFieldSelect,
- scope: this
- }
- });
-
-// Create a Combo which allows selection of a test
- this.testCombo = new Ext.form.ComboBox({
- triggerAction: 'all',
- editable: false,
- forceSelection: true,
- store: ['<', '<=', '=', '!=', '>=', '>'],
- listeners: {
- select: this.onTestSelect,
- scope: this
- }
- });
-
-// Inputs for each type of field. Hidden and shown as necessary
- this.booleanInput = new Ext.form.Checkbox({
- hideParent: true,
- hidden: true,
- testFilter: function(rec) {
- var t = rec.text;
- return (t == '=') || (t == '!=');
- },
- listeners: {
- check: this.onTestValueChange,
- scope: this
- }
- });
- this.intInput = new Ext.form.NumberField({
- allowDecimals: false,
- hideParent: true,
- hidden: true,
- listeners: {
- change: this.onTestValueChange,
- scope: this
- }
- });
- this.floatInput = new Ext.form.NumberField({
- hideParent: true,
- hidden: true,
- listeners: {
- change: this.onTestValueChange,
- scope: this
- }
- });
- this.textInput = new Ext.form.TextField({
- hideParent: true,
- hidden: true,
- listeners: {
- change: this.onTestValueChange,
- scope: this
- }
- });
- this.dateInput = new Ext.form.DateField({
- hideParent: true,
- hidden: true,
- convertValue: function(d) {
- return d.valueOf();
- },
- listeners: {
- change: this.onTestValueChange,
- scope: this
- }
- });
-
- this.cls = 'x-filter-condition';
- this.items = [{
- xtype: 'button',
- iconCls: 'delete-button',
- handler: this.removeSelf,
- scope: this,
- tooltip: 'Remove this condition'
- }, {
- xtype: 'button',
- handler: this.toggleEnabled,
- scope: this,
- iconCls: 'condition-row-enabled',
- tooltip: 'Enable/disable this condition'
- }, this.fieldCombo, this.testCombo, this.booleanInput, this.intInput, this.floatInput, this.textInput, this.dateInput];
- Ext.ux.FilterCondition.superclass.initComponent.apply(this, arguments);
- },
-
- removeSelf: function() {
- var o = this.ownerCt;
- o.remove(this, true);
- o.doLayout();
- },
-
- toggleEnabled: function(b) {
- b = Ext.get(b.el.query(b.buttonSelector));
- if (this.disabled) {
- b.removeClass('condition-row-disabled');
- b.addClass('condition-row-enabled');
- this.enable();
- } else {
- b.removeClass('condition-row-enabled');
- b.addClass('condition-row-disabled');
- this.disable();
- }
- },
-
- focus: function() {
- this.fieldCombo.focus();
- },
-
- onDisable: function() {
- for (var i = 0, it = this.items.items, l = it.length; i < l; i++) {
- if (!(it[i] instanceof Ext.Button)) {
- it[i].disable();
- }
- }
- this.disabled = true;
- this.fireEvent("change", this);
- },
-
- onEnable: function() {
- for (var i = 0, it = this.items.items, l = it.length; i < l; i++) {
- it[i].enable();
- }
- this.disabled = false;
- this.fireEvent("change", this);
- },
-
- onFieldSelect: function(combo, rec, index) {
- this.booleanInput.hide();
- this.intInput.hide();
- this.floatInput.hide();
- this.textInput.hide();
- this.dateInput.hide();
- var t = rec.get('type');
- if (t == 'boolean') {
- this.booleanInput.show();
- this.valueInput = this.booleanInput;
- } else if (t == 'int') {
- this.intInput.show();
- this.valueInput = this.intInput;
- } else if (t == 'float') {
- this.floatInput.show();
- this.valueInput = this.floatInput;
- } else if (t == 'date') {
- this.dateInput.show();
- this.valueInput = this.dateInput;
- } else {
- this.textInput.show();
- this.valueInput = this.textInput;
- }
-
-// Allow the value input to determine which test types are allowed.
- var fn = this.valueInput.testFilter;
- if (fn) {
- this.testCombo.store.filterBy(fn);
- } else {
- this.testCombo.store.clearFilter();
- }
- this.fireEvent("change", this);
- },
-
- onTestSelect: function(combo, rec, index) {
- this.fireEvent("change", this);
- },
-
- onTestValueChange: function() {
- this.fireEvent("change", this);
- },
-
- getValue: function() {
- return {
- field: this.fieldCombo.getValue(),
- test: this.testCombo.getValue(),
- value: this.valueInput.getValue()
- };
- },
-
- getFilterFunction: function() {
- if (!this.filterFunction) {
- this.filterFunction = this.filterFunctionImpl.createDelegate(this);
- }
- return this.filterFunction;
- },
-
- filterFunctionImpl: function(rec) {
- var fieldValue = rec.get(this.fieldCombo.getValue());
- var v = this.valueInput.getValue();
-
-// If the field knows how to preprocess...
- if (this.valueInput.convertValue) {
- fieldValue = this.valueInput.convertValue(fieldValue);
- v = this.valueInput.convertValue(v);
- }
-
- switch (this.testCombo.getValue()) {
- case '<':
- return fieldValue < v;
-
- case '<=':
- return fieldValue <= v;
-
- case '=':
- return fieldValue == v;
-
- case '!=':
- return fieldValue != v;
-
- case '>=':
- return fieldValue >= v;
-
- case '>':
- return fieldValue > v;
-
- }
- },
-
- isEmpty: function() {
- return ((this.fieldCombo.getValue.length == 0) && (this.testCombo.getValue().length == 0)) || !this.valueInput;
- }
-});
-
-Ext.ux.StoreFilter = Ext.extend(Ext.Panel, {
- constructor: function(config) {
- config = Ext.apply({}, {
- layout: 'anchor',
- bodyStyle: {
- padding: '10px 0px 10px 10px',
- overflow: 'auto'
- },
- defaults: {
- xtype: 'container',
- autoEl: {}
- },
- items: [{
- cls: 'x-condition-header',
- anchor: '-25',
- layout: 'column',
- style: {
- 'text-decoration': 'underline',
- 'font': 'bold small verdana',
- 'margin-bottom': '5px'
- },
- defaults: {
- xtype: 'box',
- style: {
- 'padding-left': '5px'
- }
- },
- items: [{
- style: {
- 'padding-left': '65px'
- },
- width: 235,
- autoEl: {html: 'Field to test'}
- }, {
- width: 170,
- autoEl: {html: 'Test type'}
- }, {
- autoEl: {html: 'Test value'}
- }]
- }, this.addConditionButton = new Ext.Button({
- iconCls: 'add-button',
- handler: this.onAddConditionButtonClick,
- scope: this,
- tooltip: 'Add condition',
- style: {
- 'margin-left': '4px'
- }
- })],
- bbar: new Ext.Toolbar([
- this.filterButton = new Ext.Button({
- text: "Filter",
- tooltip: 'Filter grid',
- handler: this.doFilter,
- scope: this
- }),
- this.clearFilterButton = new Ext.Button({
- text: "Clear Filter",
- tooltip: 'Clear filters',
- handler: this.clearFilter,
- scope: this
- })
- ])
- }, config);
- Ext.ux.StoreFilter.superclass.constructor.call(this, config);
- },
-
- onAddConditionButtonClick: function() {
- var c, j = this.items.getCount();
- if (j > 2) {
- c = this.items.items[j - 2];
- if (c.isEmpty()) {
- return;
- }
- }
- c = new Ext.ux.FilterCondition({store: this.store});
- if (this.autoApply) {
- c.on('change', this.doFilter, this)
- }
- this.insert(this.items.getCount() - 1, c);
- this.doLayout();
- this.addConditionButton.getEl().scrollIntoView(this.body);
- c.focus();
- },
-
- doFilter: function() {
- this.store.filterBy(this.getFilterFunction());
- },
-
- clearFilter: function() {
- this.store.clearFilter();
- },
-
- getFilterFunction: function() {
- if (!this.filterFunction) {
- this.filterFunction = this.filterFunctionImpl.createDelegate(this);
- }
- return this.filterFunction;
- },
-
- filterFunctionImpl: function(rec) {
- for (var i = 0, it = this.items.items, l = it.length; i < l; i++) {
- var c = it[i];
- if ((c instanceof Ext.ux.FilterCondition) && (!c.isEmpty()) && (!c.disabled)) {
- var fn = c.getFilterFunction();
- if (!fn(rec)) {
- return false;
- }
- }
- }
- return true;
- }
-});
-
-Ext.override(Ext.ToolTip, {
- onTargetOver : function(e){
- if(this.disabled || e.within(this.target.dom, true)){
- return;
- }
- var t = e.getTarget(this.delegate);
- if (t) {
- this.triggerElement = t;
- this.clearTimer('hide');
- this.targetXY = e.getXY();
- this.delayShow();
- }
- },
- onMouseMove : function(e){
- var t = e.getTarget(this.delegate);
- if (t) {
- this.targetXY = e.getXY();
- if (t === this.triggerElement) {
- if(!this.hidden && this.trackMouse){
- this.setPagePosition(this.getTargetXY());
- }
- } else {
- this.hide();
- this.lastActive = new Date(0);
- this.onTargetOver(e);
- }
- } else if (!this.closable && this.isVisible()) {
- this.hide();
- }
- },
- hide: function(){
- this.clearTimer('dismiss');
- this.lastActive = new Date();
- delete this.triggerElement;
- Ext.ToolTip.superclass.hide.call(this);
- }
-});
-
-Ext.override(Ext.grid.GridView, {
- initUI : function(grid){
-// Buffer processing of rows so that multiple changes to the GridView
-// only trigger this expensive operation when they are all done.
- this.on("processrows", this.doProcessRows, this, {buffer: 100});
-
- grid.on("headerclick", this.onHeaderClick, this);
-
- if(grid.trackMouseOver){
- grid.on("mouseover", this.onRowOver, this);
- grid.on("mouseout", this.onRowOut, this);
- }
- },
-
- processRows : function(startRow, skipStripe){
- this.fireEvent('processrows', startRow, skipStripe);
- },
-
-// private
- doProcessRows: function(startRow, skipStripe) {
-
-// Ensure the focus element doesn't get stranded outside the occupied area.
- var h = this.mainBody.dom.offsetHeight;
- if (parseInt(this.focusEl.dom.style.top) > h) {
- this.focusEl.dom.style.top = h + 'px';
- }
-
- if(this.ds.getCount() < 1){
- return;
- }
- skipStripe = skipStripe || !this.grid.stripeRows;
- startRow = startRow || 0;
- var rows = this.getRows();
- var cls = ' x-grid3-row-alt ';
- for(var i = startRow, len = rows.length; i < len; i++){
- var row = rows[i];
- row.rowIndex = i;
- if(!skipStripe){
- var isAlt = ((i+1) % 2 == 0);
- var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
- if(isAlt == hasAlt){
- continue;
- }
- if(isAlt){
- row.className += " x-grid3-row-alt";
- }else{
- row.className = row.className.replace("x-grid3-row-alt", "");
- }
- }
- }
- }
-});
-
-Ext.onReady(function(){
-
- Ext.QuickTips.init();
-
- var myData = [
- ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
- ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
- ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
- ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
- ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
- ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
- ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
- ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
- ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
- ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
- ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
- ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
- ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
- ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
- ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
- ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
- ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
- ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
- ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
- ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
- ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
- ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
- ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
- ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
- ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
- ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
- ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
- ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
- ['3m Co',71.20,0.02,0.03,'9/1 12:00am']
- ];
-
- // example of custom renderer function
- function change(val){
- if(val > 0){
- return '<span style="color:green;">' + val + '</span>';
- }else if(val < 0){
- return '<span style="color:red;">' + val + '</span>';
- }
- return val;
- }
-
- // example of custom renderer function
- function pctChange(val){
- if(val > 0){
- return '<span style="color:green;">' + val + '%</span>';
- }else if(val < 0){
- return '<span style="color:red;">' + val + '%</span>';
- }
- return val;
- }
-
- // create the data store
- var store = new Ext.data.ArrayStore({
- fields: [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ],
- comparator: function(r1, r2){
- var v1 = r1.data[this.sortInfo.field], v2 = r2.data[this.sortInfo.field];
- return -(v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
- }
- });
- store.loadData(myData);
-
- // create the Grid
- grid = new Ext.grid.GridPanel({
- id: 'static-grid',
- store: store,
- columns: [
- {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
- {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
- {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
- {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
- {header: "Last<br/>Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ],
- viewConfig: {
- emptyText: 'No matching data'
- },
- stripeRows: true,
- autoExpandColumn: 'company',
- title:'Array Grid',
- region: 'center',
- margins: '0 5 5 5'
- });
- var myGrid = grid;
-
- myGrid.on('render', function() {
- myGrid.tip = new Ext.ToolTip({
- view: myGrid.getView(),
- target: myGrid.getView().mainBody,
- delegate: '.x-grid3-row',
- trackMouse: true,
- renderTo: document.body,
- listeners: {
- beforeshow: function updateTipBody(tip) {
- tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement);
- }
- }
- });
- });
-
- var filter = new Ext.ux.StoreFilter({
- store: store,
- autoApply: true,
- title: 'Filters',
- collapsible: true,
- height: 200,
- region: 'north',
- margins: '5 5 0 5',
- cmargins: '5 5 5 5',
- split: true
- });
-
- new Ext.Viewport({
- layout:'border',
- items: [ filter, grid ]
- });
-});
-</script>
-</head>
-<body>
-</body>
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff