Largeurs de colonne de données riches étendues

code> ne gère vraiment pas très bien les défilements horizontaux. En fait, il semble que les développeurs déterminés à défilement horizontal à côté impossible.

Vous pouvez mettre code> dans un

Pour activer la barre de défilement horizontal Voir le contournement ici https://jira.jboss.org/ Jira / Browse / RF-4871 .

Pour que les colonnes redimensionnables lorsque vous affichez la barre de défilement horizontal, voir cette http: //community.jboss. org / message / 518878 # 518878 .

J'ai combiné toutes sortes d'idées et j'ai proposé ce qui suit:

Il y a - comme mentionné - aux choses à réparer. L'une est la défrolabilité au-delà de 100% de la largeur de table et le second est la barre de défilement elle-même. Donc, je vais avoir un fichier JS pour corriger le problème de redimensionnement et certains CSS pour ajouter la barre de défilement ... p>

page.xhtml em> - votre page avec une partie étendue-dt À l'intérieur. P>

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) {
      if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) {
           if(!this.dragColumnInfo.dragStarted) {
                this.dragColumnInfo.dragStarted = true;
                this._showSplitter(this.dragColumnInfo.srcElement.columnIndex);
           }
           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var x = this.dragColumnInfo.originalX + delta;
           var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width;
           this.columnSplitter.moveToX(finalX);                     
           Event.stop(event);
      }
 }

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) {
      Event.stop(event);
      Event.stopObserving(document, 'mousemove', this.eventSepMouseMove);
      Event.stopObserving(document, 'mouseup', this.eventSepMouseUp);
      if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) {
           this.dragColumnInfo.dragStarted = false;
           this.dragColumnInfo.mouseDown = false;

           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX;
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var columnIndex = this.dragColumnInfo.srcElement.columnIndex;
           var newWidth = this.getColumnWidth(columnIndex) + delta;

           this.extDt.setColumnWidth(columnIndex, newWidth);
           this.setColumnWidth(columnIndex,newWidth);
           this.extDt.updateLayout();
           if (this.extDt.onColumnResize){
                //set properly value to this.columnWidths
                this.extDt.columnWidths = "";
                for (i=0; i<this.columnsNumber; i++){
                     this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";";
                }//for
                this.extDt.onColumnResize(event, this.extDt.columnWidths);
           }
      }
      this._hideSplitter();
 }

ExtendedDataTable.DataTable.prototype.calculateWidthsFromRatios = function() {
    LOG.debug('firing calculateWidthsFromRatios');
    var c = this.getColumns();
    var scrollbarWidth = this.getScrollbarWidth();
    this._scrollbarWidth = scrollbarWidth;
    LOG.debug('Scrollbar: ' + scrollbarWidth);
    var mainDivWidth = this.mainDiv.getWidth();
    LOG.debug('Main DIV: ' + mainDivWidth);
    var maxWidth = mainDivWidth - scrollbarWidth;
    LOG.debug('Width to spread: ' + maxWidth);
    var totalWidth = 0;
    for (i = 0; i < c.length - 1; i++) {
        LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]);
        var w = Math.round(this.ratios[i] * maxWidth);
        if (w < parseInt(this.minColumnWidth)) {
            w = parseInt(this.minColumnWidth);
        }
        LOG.debug('setting column ' + i + ' to width: ' + w);
        this.setColumnWidth(i, w);
        this.header.setColumnWidth(i, w);
        totalWidth += w;
    }
    /*
     * if (totalWidth > maxWidth) {
     * c[c.length - 2].width -= (totalWidth - maxWidth);
     * }
     */
};

Selon cet exemple ici:

Richfaces Showcase

La largeur est utilisée de cette façon (cochez la source du XHTML): xxx

pour moi, il fonctionnait sans problème.

Salutations.