Ext JS machen Paging-Symbolleiste kleiner

Ich habe eine sehr einfache Frage, aber ich finde keine einfache Antwort. Tatsächlich habe ich keine Antwort gefunden, wie man die Paging-Symbolleiste eines Ext-JS-Rasters verkleinert.Ext JS machen Paging-Symbolleiste kleiner

Ich habe eine sehr einfache fiddle gemacht, um zu untersuchen, wie das funktioniert, und es sieht so aus, als ob ExtJS die Positionen der Elemente in der Paging-Symbolleiste dynamisch berechnen wird. Insbesondere werden die 'linken' css-Attribute gesetzt.

Also würde ich gerne wissen, wie man die Funktion, die diese Werte berechnet, zwickt, so dass ich diese Werte verringern kann. Ich könnte jQuery/Javascript verwenden, um das zu tun, aber das klingt einfach so falsch, also bevorzuge ich eine saubere ExtJS-Möglichkeit, dies zu tun.

Anstatt also so etwas wie dieses ...

Ich möchte, dies sehen:

Zum Beispiel die 'vorherige Seite' Taste in meiner Probe hat einen Inline-CSS-Stil deklariert (am wahrscheinlichsten von der Seitenleiste Toolbar Widget) mit 41px nach links, während das Trennzeichen-Symbol 81px für die gleiche 'links' Stil hat. Dies wird fortgesetzt, bis die gesamte Breite der Symbolleiste abgedeckt ist.

Also, was ich möchte, ist, die Berechnungen abzufangen und die Werte der Elemente zu verringern, um die gesamte Breite der Symbolleiste zu verringern.

Alle Vorschläge wären willkommen.

Quelle

2016-10-25 hbulens

Sie möchten also Ihre Schaltfläche nach rechts verschieben? Oder möchten Sie die Größe dieser Symbolleiste reduzieren? (Sowohl die Höhe der Symbolleiste und die Schaltfläche sind editierbar) –

@Ludovic Ich möchte die Größe der Symbolleiste zu reduzieren, also drücken Sie die Elemente ein wenig mehr zusammen. – hbulens

Sie müssen also nur die Größe Ihrer Werkzeugleiste oder die Größe aller Elemente mit der Eigenschaft 'height' reduzieren –

dachte, ich würde die Antwort auf meine eigene Post Frage. Es gibt eine Konfiguration, die horizontales Scrollen ermöglicht, wenn die Werkzeugleiste zu klein wird:

Quelle

2017-03-29 17:09:28 hbulens

Zuerst legen Sie die Breite der Schaltfläche fest.

new Ext.Button({ 
    width: 100, <<== width of the button 
    text: 'Smaller paging toolbar', 
    // ...

Dann können Sie Ihr Element auf der rechten Seite mit einem Toolbar Separator bewegen, gerade vor dem Knopf:

[ 
    {xtype: 'tbseparator', width: 200 }, 
    new Ext.Button({ 
    // ...

Hier ist Ihre corrected fiddle

Quelle

2016-10-25 11:51:30

Das scheint keine Wirkung zu haben, und ich bin ziemlich überrascht von Youranswer. Warum hat die Höhe Auswirkungen auf die Breite der einzelnen Elemente in der Symbolleiste? – hbulens

@hbulens Sie haben Recht ich missverstanden Ihre Frage. Siehe meine bearbeitete Antwort –

Das ist keine nahe Antwort auf meine Frage. – hbulens

Ext JS machen Paging-Symbolleiste kleiner

Antwort

Verwandte Themen