How to declare alignment in a toolbar declared as array

[Juan Antonio Martínez]

Hi all.
This is my first post to this forum. I've not found notices on propper use, so apologizes if this is not the correct way to ask for help

I have an on-the-fly declared datagrid, and so, toolbar is declared as an array.
Is there any way to specify some of the buttons are left-aligned and some other with right alignment

As HTML code It's easy to do:

Code:

    
    <!-- BARRA DE TAREAS DE LA TABLA DE PRUEBAS-->
    <div id="pruebas-toolbar" style="padding:5px 5px 25px 5px;">
        <span style="float:left;">
            <a id="pruebas-newBtn" href="#" class="easyui-linkbutton" onclick="newPrueba()">New prueba</a>
            <a id="pruebas-editBtn" href="#" class="easyui-linkbutton" onclick="editPrueba()">Edit prueba</a>
            <a id="pruebas-delBtn" href="#" class="easyui-linkbutton" onclick="deletePrueba()">Delete prueba</a>
        </span>
        <span style="float:right;">
                <a id="pruebas-reloadBtn" href="#" class="easyui-linkbutton" onclick="reloadDatagrid() >Actualizar</a>
        </span>
    </div>
    .... 
   $('#pruebas-datagrid').datagrid({
   ...
   toolbar: '#pruebas-toolbar',
   ...

But don't know how to do it if declared as an array:

Code:

toolbar:  [
                {
                        id: 'pruebas-newBtn',
                        text: 'New prueba',
                        plain: true,
                        iconCls: 'icon-new',
                        handler: function(){newPrueba();}
                 },{
                        id: 'pruebas-editBtn',
                        text: 'Edit prueba',
                        plain: true,
                        iconCls: 'icon-edit',
                        handler: function(){editPrueba();}
                 },{
                        id: 'pruebas-delBtn',
                        text: 'Delete prueba',
                        plain: true,
                        iconCls: 'icon-delete',
                        handler: function(){deletePrueba();}
                 },{
                        id: 'prueba-reloadBtn',
                        text: 'Actualizar',
                        plain: true,
                        iconCls: 'icon-reload',
                        style: 'align:right', <<<<<<< How to tell toolbar that this item must be right aligned in toolbar?
                        handler: function(){reloadDatagrid();}    // reload the pruebas data}
                 }
               ],

Perhaps declare an string var like first code and assigning to 'toolbar' property? An easy example on how to do this?.

Thanks in advance
Juan Antonio

[stworthy]

Please extend a new method 'buildToolbar' to build tools with 'align' property.

Code:

$.extend($.fn.datagrid.methods, {
  buildToolbar: function(jq, items){
    return jq.each(function(){
      var p = $(this).datagrid('getPanel');
      p.children('div.datagrid-toolbar').remove();
      var tb = $('<div class="datagrid-toolbar"></div>').prependTo(p);
      $.map(items, function(item){
        var t = $('<a href="javascript:void(0)"></a>').appendTo(tb);
        t.linkbutton($.extend({}, item, {
          onClick:function(){
            if (item.handler){
              item.handler.call(this);
            }
            if (item.onClick){
              item.onClick.call(this);              
            }
          }
        }));
        t.css('float', item.align || '');
      })
    })
  }
});

Usage example:

Code:

  var items = [
  {
    id: 'pruebas-newBtn',
    text: 'New prueba',
    plain: true,
    iconCls: 'icon-new',
    onClick:function(){console.log('cc')},
    handler: function(){newPrueba();}
  },{
    id: 'pruebas-editBtn',
    text: 'Edit prueba',
    plain: true,
    iconCls: 'icon-edit',
    handler: function(){editPrueba();}
  },{
    id: 'pruebas-delBtn',
    text: 'Delete prueba',
    plain: true,
    iconCls: 'icon-delete',
    handler: function(){deletePrueba();}
  },{
    id: 'prueba-reloadBtn',
    text: 'Actualizar',
    plain: true,
    iconCls: 'icon-reload',
    align: 'right', // How to tell toolbar that this item must be right aligned in toolbar?
    handler: function(){reloadDatagrid();}    // reload the pruebas data}
  }];

  $('#dg').datagrid('buildToolbar', items)

[Juan Antonio Martínez]

Works, great! Thanks a lot.

Cheers
Juan Antonio