Ext.ux.LiveGrid

[pluesch0r]

Hi there,

thanks for making this ux!
Unfortunately, when defining an autoExpandColumn, a horizontal scrollbar gets added, no matter what.

	autoExpand : function(preventUpdate){
      var g = this.grid, cm = this.cm;
      if(!this.userResized && g.autoExpandColumn){
          var tw = cm.getTotalWidth(false);
          var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset;
          if(tw != aw){
              var ci = cm.getIndexById(g.autoExpandColumn);
              var currentWidth = cm.getColumnWidth(ci);
              // fix for horizontal scrollbar display
              var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax) - 2;
              if(cw != currentWidth){
                  cm.setColumnWidth(ci, cw, true);
                  if(preventUpdate !== true){
                      this.updateColumnWidth(ci, cw);
                  }
              }
          }
      }
  },

The above (untested) code fixes this .. just put it into BufferedGridView.js and enjoy ..

Thanks again,
Martin

[eliasp]

Has anyone used Livegrid + the Grid Filter plugin? I'm trying this out and the grid and filters work as expected except when I apply a filter and then scroll the grid -- once the grid makes a request for new rows, it doesn't pass the filter to my server-side function so it ends up pulling new rows from an unfiltered dataset...

Any ideas on how to pass the filters through livegrid and back to the server?

thx

Matt

I'm facing exactly the same problem here. Didn't find a solution yet.
My current code: http://pastebin.ca/884729

Regards, Elias P.

[mattb]

Has anyone used Livegrid + the Grid Filter plugin? I'm trying this out and the grid and filters work as expected except when I apply a filter and then scroll the grid -- once the grid makes a request for new rows, it doesn't pass the filter to my server-side function so it ends up pulling new rows from an unfiltered dataset...

Any ideas on how to pass the filters through livegrid and back to the server?

thx

Matt

I found a solution for this -- I had already created a buildQuery function in the GridFilters definition. Whenever that function is executed to change the filters, I change the URL for the data store to pass the filter to the server:

    var url = '/cdt/grid_data';
    var bufferedDataStore = new Ext.ux.grid.BufferedStore({
        autoLoad   : true,
        bufferSize : 300,
        reader     : bufferedReader,
        sortInfo   : {field: 'display_name', direction: 'ASC'},
        url        : url
    });

    var filters = new Ext.ux.grid.GridFilters({
        filters : [
            {type: 'string',  dataIndex: 'display_name'},
            {type: 'string',  dataIndex: 'infohash'},
            {type: 'boolean', dataIndex: 'enabled'}
        ],
        buildQuery : function(filters) {
            var myarray = [];
            for(var i = 0; i < filters.length; i++) {
                myarray.push({'field' : filters[i].field, 'type' : filters[i]['data'].type, 'value' : filters[i]['data'].value});
            };
            filterstring = Ext.util.JSON.encode(myarray);
            bufferedDataStore.proxy.conn.url = url + "?filters=" + filterstring;
            return {'filters' : filterstring};
        }
    });

thx

m

[efattal]

My solution for combining Livegrid and RowNumberer:
- Define an extension of Ext.grid.RowNumberer:

Ext.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
    renderer : function(v, p, record, rowIndex, colIndex, store){
        if(this.rowspan){
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        return store.getGridView().bufferRange[0]+rowIndex+1;
    }
});

- Use this class as a column in the ColumnModel

var colModel = new Ext.grid.ColumnModel([
    new Ext.ux.grid.RowNumberer(),
    {header: "Ticker", width: 60, sortable: true},
    ...
]);

- Link both when creating the BufferedStore :

this.view = new Ext.ux.grid.BufferedGridView({
    ....
});
new Ext.ux.grid.BufferedStore({
    ....,
    getGridView: function(){return this.view}.createDelegate(this)
});

It works.

Does anyone have a better solution ?

Thanks for your answers

[redxiii]

I cannot access to http://www.siteartwork.de/2007/11/10...nt-with-extjs/ is has a message
" This Domain is currently inaccessible! "

Please post it to me.

thank a lot

[mattb]

Hi all,

Anyone had any luck plugging LiveGrid into an editable grid?

I'm having some success, but I'm having trouble getting record inserts to work without really messing up the grid view...

m

[Sultanalifezar]

Anyone have the latest? I had to get a copy of the code from a chinese website, thx god I can read a little chinese. Anyhow it has alot of bugs\defects and I've fixed alot of them, but I was wondering if there was a more stable version available, and since I can't get to the guys domain says its down. Any help is appreciated. THx.

[Sultanalifezar]

Thanks for your help. I've tried your fix but it doesn't work for me. I attached the firebug output with the error.

Ok I fixed it, what is happening is the scroll is being adjusted and the last row is not painted before other code runs so it doesn't exist and that causes the error.

In BufferedGridView.js in adjustScrollerPos add the marked line of code, it will force an update of the grid and make it all good. Enjoy.

adjustScrollerPos : function(pixels, suspendEvent)
    {
        var liveScroller = this.liveScroller;
        
        if (suspendEvent === true) {
            liveScroller.un('scroll', this.onLiveScroll, this);
        }
        
        liveScroller.dom.scrollTop += pixels;
        this.onLiveScroll(); //forces grid to update fixed using arrow keys to move up from     top or down from bottom.
        
        if (suspendEvent === true) {
            liveScroller.dom.scrollTop = liveScroller.dom.scrollTop;
            liveScroller.on('scroll', this.onLiveScroll, this);
        }
        
    }

[Shmoo]

I found a solution for this -- I had already created a buildQuery function in the GridFilters definition. Whenever that function is executed to change the filters, I change the URL for the data store to pass the filter to the server:

    var url = '/cdt/grid_data';
    var bufferedDataStore = new Ext.ux.grid.BufferedStore({
        autoLoad   : true,
        bufferSize : 300,
        reader     : bufferedReader,
        sortInfo   : {field: 'display_name', direction: 'ASC'},
        url        : url
    });

    var filters = new Ext.ux.grid.GridFilters({
        filters : [
            {type: 'string',  dataIndex: 'display_name'},
            {type: 'string',  dataIndex: 'infohash'},
            {type: 'boolean', dataIndex: 'enabled'}
        ],
        buildQuery : function(filters) {
            var myarray = [];
            for(var i = 0; i < filters.length; i++) {
                myarray.push({'field' : filters[i].field, 'type' : filters[i]['data'].type, 'value' : filters[i]['data'].value});
            };
            filterstring = Ext.util.JSON.encode(myarray);
            bufferedDataStore.proxy.conn.url = url + "?filters=" + filterstring;
            return {'filters' : filterstring};
        }
    });

thx

m

Thanks!

Its good to see that people already thinking of mixing up FilteredGrid and LiveGrid.. I am trying one myself.. I'll post my codes once I get things up and running.

EDIT: Managed to get the LiveGrid working but I think my filters won't work because I set local:true for the filters.
Do I have to set anything within LiveGrid or do I have to set filters to remote? I am leaning on setting the filter to remote
but I have no script in handling filters on the server-side. >.<

var filters = new Ext.ux.grid.GridFilters({				
						local:true,
						buildQuery : function(filters) {
			            var myarray = [];
				            for(var i = 0; i < filters.length; i++) {
				                myarray.push({'field' : filters[i].field, 'type' : filters[i]['data'].type, 'value' : filters[i]['data'].value});
				            };
				            filterstring = Ext.util.JSON.encode(myarray);
				            bufferedDataStore.proxy.conn.url = GET_STUDY_DATASET_URL + "?filters=" + filterstring;
				            return {'filters' : filterstring};
				        },
						filters:[						
						/* some filter data here */
				]});

I cannot post the filter data(sorry) but its just some Apache Velocity Template code.

[2le]

Hi,

I'm using this live grid in a sort of webmail projet. But when i scroll, I have the following error in firebug and the grid doesn't update.

I don't know why, so any idea is welcome.

You could try at www.kiwi-mail.fr login : demo/demo

Thanks in advance

K has no properties
GridView([Object name=type id=0 style=width:30px;text-align:left;, Object name=subject id=1, Object name=contact id=2, 3 more...], [undefined, undefined, undefined, 3 more...], Object autoLoad=true bufferSize=150 reader=Object, 93, 6, false)ext-all.js (line 141)
GridView(93, 93)ext-all.js (line 141)
replaceLiveRows(171, true)BufferedGridView.... (line 1371)
updateLiveRows(171, true, undefined)BufferedGridView.... (line 1222)
adjustVisibleRows()BufferedGridView.... (line 1477)
layout()BufferedGridView.... (line 434)
initComponent()ext-all.js (line 140)
initComponent(1043, 251)ext-all.js (line 62)
onLayout(Object x=0 y=0 width=1043 height=251)ext-all.js (line 70)
onLayout(Object initialConfig=Object layout=Object title=Messages, Object dom=div#ext-gen40.x-panel-body id=ext-gen40)ext-all.js (line 70)
ContainerLayout()ext-all.js (line 65)
onLayout(Object el=Object resizingEl=Object orientation=1, 200)ext-all.js (line 70)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
SplitBar(Object browserEvent=Event mousemove button=0)ext-all.js (line 63)
apply()ext-base.js (line 9)
DragDrop(Object browserEvent=Event mousemove button=0)ext-all.js (line 31)
apply()ext-base.js (line 9)
DragDrop(Object browserEvent=Event mousemove button=0)ext-all.js (line 31)
EventManager(Object browserEvent=Event mousemove button=0)ext-all.js (line 13)
getViewWidth(mouseup clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] Ext.grid.GridView=function(A){Ext.apply(this,A);this.addEvents("beforerowremoved...