How does Modx style a default button?

8 Posts

philipp-x Reply #1, 13 years, 3 months ago

Hi everyone,
I got another question about custom TV's.
I managed to create my first custom TV. Now I'd like to style the buttons I'm using in it like the Modx default buttons. Which CSS-classes is Modx using to style a default submit button? Or do I need to create it with Ext-Js?
Have a nice day.
Philipp-x

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #2, 13 years, 3 months ago

If you use ExtJS, you will always inherit the proper styles - simply add an xtype: 'button'.

If you'd rather use plain HTML, here's what a default button (in a toolbar) with ExtJS looks like:

<table id="ext-comp-1059" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto;">
<tbody class="x-btn-small x-btn-icon-small-left">
  <tr>
    <td class="x-btn-tl"><i> </i></td>
    <td class="x-btn-tc"></td>
    <td class="x-btn-tr"><i> </i></td>
  </tr>
  <tr>
    <td class="x-btn-ml"><i> </i></td>
    <td class="x-btn-mc">
      <em class="" unselectable="on">
        <button type="button" id="ext-gen84" class=" x-btn-text" style="">Text In Button</button>
      </em>
    </td>
    <td class="x-btn-mr"><i> </i></td>
  </tr>
  <tr>
    <td class="x-btn-bl"><i> </i></td>
    <td class="x-btn-bc"></td>
    <td class="x-btn-br"><i> </i></td>
  </tr>
</tbody>
</table>

.. pretty huh? tongue

You could also borrow/adapt the styles from http://chsmedien.com/blog/2013/02/customize-your-modx-dashboard which mimics the buttons but has a much, much cleaner syntax.

Revo 2.3 will have a different design though - the benefit of using ExtJS is that it will carry along nicely when 2.3 lands.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

8 Posts

philipp-x Reply #3, 13 years, 3 months ago

Hi Mark,
Thank you a lot for your answer.
ExtJS is also my favorite. As I'm new to Modx I have problems to get it work with ExtJS. I read about it on sencha.com and in the RTFM but so far I wasn't able to create a simple button with ExtJS on Modx. I'm not sure about the correct syntax.
Is there a documentation with all the steps I need to create a simple button with ExtJS?
What I got:

<div id="ourtvs{$tv->id}"></div>
<script type="text/javascript">
    myTV{$tv->id} = MODx.load{literal}({
    {/literal}
        xtype: 'button',
        renderTo: 'ourtvs{$tv->id}',
        action: '/assets/components/customtv/connector.php',
        name: 'tv{$tv->id}',
        text: 'Text for button'
    {literal}
    });
{/literal}
</script>

[ed. note: philipp-x last edited this post 13 years, 3 months ago.]