2012-04-13 2 views
0

Gibt es eine Möglichkeit, das Kollaps-Symbol in einem Panel zu drehen (http://i.imgur.com/2ZvKd.png)? Da die Richtung ein wenig irreführend ist, wenn das Panel in eine entgegengesetzte Richtung kollabiert, was das Symbol anzeigt.Wie kann man das Dreieck-Kollaps-Symbol im Ext Js Panel drehen?

defaults: { 
      collapsible: true, 
      animFloat: true, 
      autoHide: true, 
      cmargins: '5 5 5 5' 
     }, 
     items: 
     [{ 
      xtype: 'createreportview', 
      bodyStyle:{ padding: '10px'}, 
      minHeight:280, 
      flex: 0.40 
     }, 
     { 
      xtype: 'splitter', 
      collapseTarget:'prev' 
     }, 
     { 
      xtype: 'resultsview', 
      flex: 0.60 
     }] 
} 

Es gibt 2 Platten, der Einsturz-Symbol auf der zweiten Platte (resultsview) das in dem Bild oben gepostet gezeigt und ist derjenige im zu beheben versuchen.

+0

Verwenden Sie ExtJs3 oder 4? – sha

+0

@sha Ext Js 4.1 RC3 – Armaan

Antwort

0

Sie könnten nur die Hintergrundposition des Bildes ändern. Hier ist das Sprite aller Werkzeug Bilder:. http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/themes/images/default/tools/tool-sprites.gif

wenn Sie http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/border.html gehen und mit den Pfeilelemente inspizieren (oben und unten Pfeile auf den Platten können Sie die Hintergrund-Position Werte in der CSS sehen

für Position von unten Pfeile:

x-tool-expand-top, .x-tool-collapse-top { 
    background-position: 0 -210px; 
} 

Position der Pfeile nach oben:

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom { 
    background-position: -15px -195px; 
} 

Sie können die CSS aktualisieren (mit einem Stylesheet das lädt nach ext css-Datei) zu den folgenden, um sie zu wechseln (nur Hintergrund-Positionen wechseln):

.x-tool-expand-top, .x-tool-collapse-top { 
    background-position: -15px -195px; 
} 

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom { 
    background-position: 0 -210px; 
} 
2

Was ist Ihr Layout für den übergeordneten Container? Ich denke, Sie können einfach layout: border verwenden, und geben Sie region: south für Sie unten und es wird Pfeil nach unten haben.

Wie zum Versuch, Ihre genaue Probe zu beheben - versuchen, collapsible: true von defaults innerhalb der unteren Panel-Definition zu bewegen.

+0

Das Layout war eine vbox, änderte es an der Grenze zum unteren Bereich als 'region: south' und das Icon orientiert sich jetzt richtig, aber dann habe ich den Splitter' split: true 'in' defaults'. Der geteilte Zeiger zeigt immer vom mittleren Bereich aus, aber ich möchte, dass er auf das createrreviewview-Bedienfeld zeigt, damit die Ergebnisse vollständig erweitert werden können. Habe auch versucht, für den oberen Bereich "region: north" zu setzen, aber es versagt wieder die Kollabierungsrichtung. – Armaan

+0

Kannst du einen Screenshot von dem, was du jetzt hast, hochladen? Und wie sieht der neue Code aus? – sha

+0

http://i.imgur.com/tM0V6.png Derzeit ist das untere Panel auf 'region: center' eingestellt. '1' im Bild ist, wie ID wie er Zeiger auf den Punkt und nach oben zu erweitern, aber '2' bricht nach unten, obwohl es nach oben zeigt. – Armaan