1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    vasa is on a distinguished road

      0  

    Default Need to support Groupping view and Buffered View together Help

    Need to support Groupping view and Buffered View together Help


    since data is very large in my grid ~ 5000 rows grid performance was very slow.
    Pagination cannot be implemented as restrictions on pagination in our project.
    i used Buffered view it works fine but i need groupingview also but dont know
    how to club it together.(live grid not a solution for me now).
    please tell me how to combine buffer view and grouping view together.

    thanks

  2. #2
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    It is not advisable to display so many records because of browser performance. The main reason being that the rendering overhead of so many rows "hangs" most peoples browsers. It comes down to basic HTML being rendered. That has nothing to do with ExtJS and is a simple browser limitation. I know this doesn't solve your issue.

    It looks like you'll need to consolidate the Ext.grid.GroupingView and the Ext.ux.grid.BufferView, but there are so many overlapping methods (eg initTemplates, etc). It looks like a lot of work and I'm really not sure if it's even possible.

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    vasa is on a distinguished road

      0  

    Default


    But do we any solutions now to use Ext.grid.GroupingView and Ext.ux.grid.BufferView
    together. A example will be better.That will help me a lot

  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    vasa is on a distinguished road

      0  

    Default


    So are there any one supported buffer view and grouping view together.
    I am literally waiting if extjs team could do something about the needfull.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You would have to create a GridView that combines the code from both GroupingView and BufferView.

    This, however, would be an extremely difficult task, because BufferView completely relies on every row being the same height (uninterrupted by group headers).

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    vasa is on a distinguished road

      0  

    Default


    Is extjs team will provide the needed feature in upcoming versions??

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Almost certainly not. It's just to difficult to create without writing way to much code for a library.

  8. #8
    Ext User
    Join Date
    Mar 2009
    Posts
    2
    Vote Rating
    0
    SeaMonkey is on a distinguished road

      0  

    Default Need to support Multigroupping view and Buffered View together Help

    Need to support Multigroupping view and Buffered View together Help


    Hello, I need a component Grid that has Multigrouping view and buffer view together.

    Someone could make it, even if I need to pay it?

    Thanks

  9. #9
    Ext User
    Join Date
    Jul 2008
    Posts
    8
    Vote Rating
    0
    harimyself_b is on a distinguished road

      0  

    Default


    SeaMonkey,

    I hope this can solve your problem. It may not render on/off records as accurately as simple BufferingView. But, I'm sure that it can satisfy your requirement.
    Code:
    Ext.ux.BufferedGroupingView = Ext.extend(Ext.grid.GroupingView, {
    
        //disable group headers collapsable option.
        interceptMouse : Ext.emptyFn,
    
        rowHeight: 19,
        borderHeight: 2,
        scrollDelay: 100,
        cacheSize: 20,
        cleanDelay: 500,
        groupsList:[],
        passedGroupHeadersHeight:0,
        lastSavedVisibleRowsTemp:null,
    
        initTemplates : function(){
            Ext.ux.BufferedGroupingView.superclass.initTemplates.call(this);
            var ts = this.templates;
            // empty div to act as a place holder for a row
            ts.rowHolder = new Ext.Template(
                '<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
            );
            ts.rowHolder.disableFormats = true;
            ts.rowHolder.compile();
    
            ts.rowBody = new Ext.Template(
                '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                '<tbody><tr>{cells}</tr>',
                (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
                '</tbody></table>'
            );
            ts.rowBody.disableFormats = true;
            ts.rowBody.compile();
        },
    
        getStyleRowHeight : function(){
            return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
        },
    
        syncScroll: function(){
            Ext.ux.BufferedGroupingView.superclass.syncScroll.apply(this, arguments);
            this.update();
        },
    
        // a (optionally) buffered method to update contents of gridview
        update: function(){
            if (this.scrollDelay) {
                if (!this.renderTask) {
                    this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
                }
                this.renderTask.delay(this.scrollDelay);
            }else{
                this.doUpdate();
            }
        },
    
        doUpdate: function(){
            if (this.getVisibleRowCount() > 0) {
                var g = this.grid, cm = g.colModel, ds = g.store;
                var cs = this.getColumnData();
    
                var vr = this.getVisibleRows();
                for (var i = vr.first; i <= vr.last; i++) {
                    // if row is NOT rendered and is visible, render it
                    if(!this.isRowRendered(i)){
                        var html = this.doBufferViewRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
                        this.getRow(i).innerHTML = html;
                    }
                }
                this.clean();
            }
        },
    
        // a buffered method to clean rows
        clean : function(){
            if(!this.cleanTask){
                this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
            }
            this.cleanTask.delay(this.cleanDelay);
        },
    
        doClean: function(){
            if (this.getVisibleRowCount() > 0) {
                var vr = this.getVisibleRows();
                vr.first -= this.cacheSize;
                vr.last += this.cacheSize;
    
                var i = 0, rows = this.getRows();
                // if first is less than 0, all rows have been rendered
                // so lets clean the end...
                if(vr.first <= 0){
                    i = vr.last + 1;
                }
                for(var len = this.ds.getCount(); i < len; i++){
                    // if current row is outside of first and last and
                    // has content, update the innerHTML to nothing
                    if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
                        rows[i].innerHTML = '';
                    }
                }
            }
        },
    
        layout: function(){
            Ext.ux.BufferedGroupingView.superclass.layout.call(this);
            this.update();
        },
    
        // private
        doRender : function(cs, rs, ds, startRow, colCount, stripe){
            if(rs.length < 1){
                return '';
            }
            var groupField = this.getGroupField(),
                colIndex = this.cm.findColumnIndex(groupField),
                g;
    
            this.enableGrouping = !!groupField;
    
            if(!this.enableGrouping || this.isUpdating){
                return this.doBufferViewRender.apply(
                        this, arguments,false);
            }
    
            var gstyle = 'width:'+this.getTotalWidth()+';';
    
            var gidPrefix = this.grid.getGridEl().id;
            var cfg = this.cm.config[colIndex];
            var groupRenderer = cfg.groupRenderer || cfg.renderer;
            var prefix = this.showGroupName ?
                         (cfg.groupName || cfg.header)+': ' : '';
    
            var groups = [], curGroup, i, len, gid;
            for(i = 0, len = rs.length; i < len; i++){
                var rowIndex = startRow + i,
                    r = rs[i],
                    gvalue = r.data[groupField];
                   
                    g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
                if(!curGroup || curGroup.group != g){
                    gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g);
                       // if state is defined use it, however state is in terms of expanded
                    // so negate it, otherwise use the default.
                    var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
                    var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
                    curGroup = {
                        group: g,
                        gvalue: gvalue,
                        text: prefix + g,
                        groupId: gid,
                        startRow: rowIndex,
                        rs: [r],
                        cls: gcls,
                        style: gstyle
                    };
                    groups.push(curGroup);
                }else{
                    curGroup.rs.push(r);
                }
                r._groupId = gid;
            }
    
            var buf = [];
            for(i = 0, len = groups.length; i < len; i++){
                // maintain groups in an array.
                this.groupsList[i] = groups[i];
    
                g = groups[i];
                this.doGroupStart(buf, g, cs, ds, colCount);
                buf[buf.length] = this.doBufferViewRender(
                        cs, g.rs, ds, g.startRow, colCount, stripe, false);
    
                this.doGroupEnd(buf, g, cs, ds, colCount);
            }
            groups = null;
            return buf.join('');
        },
    
        getVisisbleGroupHeadersHeight : function(visibleHeight) {
            var totalGroupHeadersHeight = 0;
            this.passedGroupHeadersHeight = 0;
            for(var i=0; i<this.groupsList.length; i++) {           
                var header = Ext.get(this.groupsList[i].groupId);
                if(header != null){
                    var headerOffsetY = header.getOffsetsTo(this.mainBody.dom.parentNode)[1];
                    var headerHeight = header.dom.firstChild.offsetHeight;
                    if(headerOffsetY < 0){
                        this.passedGroupHeadersHeight += headerHeight;
                    }
                    if(headerOffsetY >= 0 && headerOffsetY < visibleHeight) {
                        if((headerOffsetY+headerHeight) <= visibleHeight)
                            totalGroupHeadersHeight += headerHeight;
                        else
                            totalGroupHeadersHeight += (visibleHeight-headerOffsetY);
                    }
                    else if(headerOffsetY < 0 && (headerOffsetY+headerHeight) > 0)
                        totalGroupHeadersHeight += (headerOffsetY+headerHeight);
                }
            }
            return totalGroupHeadersHeight;
        },
    
        getCalculatedRowHeight : function(){
            return this.rowHeight + this.borderHeight;
        },
    
        getVisibleRowCount : function(){
            var rh = this.getCalculatedRowHeight();
            var visibleHeight = this.scroller.dom.clientHeight;
            //already used height.
            var uh = this.getVisisbleGroupHeadersHeight(visibleHeight);
             //alert(Math.ceil((visibleHeight-uh) / rh));
            return (visibleHeight < 1) ? 0 : Math.ceil((visibleHeight-uh) / rh);
        },
    
        getVisibleRows: function(){
            var st = this.scroller.dom.scrollTop;
            if(this.lastSavedVisibleRowsTemp != null &&
               st == this.lastSavedVisibleRowsTemp.scroll &&
               this.lastSavedVisibleRowsTemp.rows.first >= 0) {
                if(this.lastSavedVisibleRowsTemp.rows.last-this.lastSavedVisibleRowsTemp.rows.last)
                return this.lastSavedVisibleRowsTemp.rows;
            }
            var count = this.getVisibleRowCount();
            var sc = st - this.passedGroupHeadersHeight;
            this.passedGroupHeadersHeight = 0;
            // start 4 rows before to aviod empty space on top caused by random miscalculations.
            var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-4);
            this.lastSavedVisibleRowsTemp =
            {
                scroll: st,
                rows: {
                    first: Math.max(start, 0),
                    last: Math.min(start + count + 3, this.ds.getCount()-1)
                }
            };
            return this.lastSavedVisibleRowsTemp.rows;
        },
    
        isRowRendered: function(index){
            var row = this.getRow(index);
            return row && row.childNodes.length > 0;
        },
    
        doBufferViewRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
            var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1;
            var rh = this.getStyleRowHeight();
            var vr = this.getVisibleRows();
            var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;';
            // buffers
            var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
            for (var j = 0, len = rs.length; j < len; j++) {
                r = rs[j]; cb = [];
                var rowIndex = (j+startRow);
                var visible = rowIndex >= vr.first && rowIndex <= vr.last;
                if (visible) {
                    for (var i = 0; i < colCount; i++) {
                        c = cs[i];
                        p.id = c.id;
                        p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                        p.attr = p.cellAttr = "";
                        p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                        p.style = c.style;
                        if (p.value == undefined || p.value === "") {
                            p.value = " ";
                        }
                        // BHM doesn't show dirty flag.
                        //if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
                        //    p.css += ' x-grid3-dirty-cell';
                        //}
                        cb[cb.length] = ct.apply(p);
                    }
                }
                var alt = [];
                if(stripe && ((rowIndex+1) % 2 == 0)){
                    alt[0] = "x-grid3-row-alt";
                }
                if(r.dirty){
                    alt[1] = " x-grid3-dirty-row";
                }
                rp.cols = colCount;
                if(this.getRowClass){
                    alt[2] = this.getRowClass(r, rowIndex, rp, ds);
                }
                rp.alt = alt.join(" ");
                rp.cells = cb.join("");
                    buf[buf.length] =  !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
            }
            return buf.join('');
        },
       
        // this function is over-loaded to improve the performance.
        getRow : function(row){
            if(!this.enableGrouping){
                var rs = Ext.grid.GroupingView.superclass.getRows.call(this);
                return rs[row];
            }
            var g, gs = this.getGroups();
            for(var i = 0, len = gs.length; i < len; i++){
                g = gs[i].childNodes[1].childNodes;
                if(g.length <= row) {
                    row -= g.length;
                    continue;
                }
                else
                    if(row >= 0)
                        return g[row];
            }
        },
    
        // private
        processRows : function(startRow, skipStripe){
            if(!this.ds || this.ds.getCount() < 1){
                return;
            }
            var rows = this.getRows();
            skipStripe = skipStripe || !this.grid.stripeRows;
            startRow = startRow || 0;
            var F=" x-grid3-row-alt ";
    
            Ext.each(rows, function(row, idx){
                row.rowIndex = idx;
                if(!skipStripe){
                    var A=((idx + 1)%2==0);
                    var G=(" "+row.className+" ").indexOf(F)!=-1;
                   
                    if(A && A!=G){
                        row.className+=" x-grid3-row-alt"
                    }
                    else if(A!=G){
                        row.className=row.className.replace("x-grid3-row-alt","")
                    }
                }
            });
            // add first/last-row classes
            if(startRow === 0){
                Ext.fly(rows[0]).addClass(this.firstRowCls);
            }
            Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
        },
    
       /**
        * This method is re-written to support both buffering
        * and Grouping.
        */
        updateAllColumnWidths:function(){
            var D=this.getTotalWidth();
            var H=this.cm.getColumnCount();
            var F=[];
            for(var B=0;B<H;B++){
                F[B]=this.getColumnWidth(B);
            }
            this.innerHd.firstChild.firstChild.style.width=D;
            for(var B=0;B<H;B++){
                var C=this.getHeaderCell(B);
                C.style.width=F[B]
            }
            var G=this.getRows();
            for(var B=0,E=G.length;B<E;B++){
                G[B].style.width=D;
    
                // following condition must be verified for buffering grid.
                if(G[B].hasChildNodes()) {
                    G[B].firstChild.style.width=D;
                    var I=G[B].firstChild.rows[0];
                    for(var A=0;A<H;A++){
                        I.childNodes[A].style.width=F[A]
                    }
                }
            }
            this.onAllColumnWidthsUpdated(F,D)
        },
    
        onColumnWidthsUpdated : function(cols, w, tw){
            // template method
        },
    
        setFocusRowCell : function (focusRowCell) {
            this.focusRowCell = focusRowCell;
        }
    });

  10. #10
    Ext User
    Join Date
    Jan 2008
    Location
    Cambridge UK
    Posts
    41
    Vote Rating
    1
    emily is on a distinguished road

      1  

    Default


    Hi harimyself_b,

    I am potentially interested in the extension you just posted (although my needs are a little more complicated), so thanks for sharing

    Anyway, I was just reading through the code, and I noticed a comments saying '// this function is over-loaded to improve the performance.', refering to the getRow method. I was just wandering what is meant by that? I have come across overloading in Java (where you have different functions that have the same name, but with different domains and ranges), but have never heard of doing it with Javascript, and wondering if it meant something different in this context?

    The problem I keep coming up against is that I wish to use something like the bufferView or even like LiveGrid with on demand fetching or rendering of data, but these only currently work with rows of a fixed height (for obvious reasons), and I would ideally like to be able to use them with things like rowexpander / grouping (clearly I am asking a lot!).

    It is hard to make a ui when dealing with very large datasets where the user needs to be able to freely investigate things within the data (without necessarily knowing what they are looking for). It would be good to find a solution in extjs for these problems.

    Em

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi