[1.0] Grid RowActions Plugin

[jsakalos]

Looks like some colliding css. I've put same icons on demo page so you can check it out there. BTW, you need to include Ext.ux.grid.RowActions.css, but I think you've already done so.

[franklt69]

Saki you are right I forget to include ../Lib/Plugin/rowactions/Ext.ux.grid.RowActions.css maybe I was working with rowaction and it don't need css file.

thanks again now is working ok

regards
Frank

[jsakalos]

Beta 2 is out.

Changes:
- code now uses XTemplate resulting in much shorter and cleaner code\
- group actions markup has changed for better cross-browser compatibility

Note: You may need to hard refresh your browser, otherwise it may use the old css.

Enjoy!

[border9]

Ok, so ive been trying to add this to my code for about 2 hours now, and i havent the slightest idea what im doing wrong. This is just the bare code so you can if you wouldnt mind, give me some sort of an idea as to what im doing wrong.

<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
function change(val){
    if(val > 0){
     return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
     return '<span style="color:red;">' + val + '</span>';
    }
   return val;
}
function pctChange(val){
    if(val > 0){
     return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
     return '<span style="color:red;">' + val + '%</span>';
   }
  return val;
 }
var store = new Ext.data.Store({
   proxy: new Ext.data.HttpProxy({url:'php/JSONQS.php'}),                                                               
     reader: new Ext.data.JsonReader({                                                                               
     root: 'customers',                                                                                      
     totalProperty: 'total'                                                                                 
   }, 
   [
   {name: 'select', type: 'string' , mapping: 'select'},
   {name: 'quote', type: 'string' , mapping: 'quote'},
   {name: 'sitesubmit', type: 'string' , mapping: 'sitesubmit'},
   {name: 'customertype', type: 'string' , mapping: 'customertype'},
   {name: 'timerecieved', type: 'date', dateFormat: 'n/j h:ia' , mapping: 'timerecieved'},
   {name: 'phonenum', type: 'string' , mapping: 'phonenum'},
   {name: 'email', type: 'string' , mapping: 'email'},
   {name: 'flname', type: 'string' , mapping: 'flname'},
   {name: 'delquote', type: 'string' , mapping: 'delquote'}
   ]
  )
});
var quotessent = new Ext.grid.GridPanel({
   ds: store,
   sm: new Ext.grid.RowSelectionModel(),
 
   columns: [
  {header: "Select", width: 10 , sortable: true, dataIndex: 'select'},
     {header: "Quote Number", width: 28 , sortable: true, dataIndex: 'quote'},
     {header: "Website Sumbit", width: 16 , sortable: true, dataIndex: 'sitesubmit'},
     {header: "Customer Type", width: 25 , sortable: true, dataIndex: 'customertype'},
  {header: "Date Time Recieved", width: 15 , sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s a'), dataIndex: 'timerecieved'},
  {header: "Phone Number", width: 25 ,  dataIndex: 'phonenum'},
  {header: "Email Address", width: 35 ,  dataIndex: 'email'},
  {header: "First / Last Name", width: 35 ,  dataIndex: 'flname'},
  {header: "Admin Remove", width: 23 , dataIndex: 'delquote' ,cellActions:[{
       iconIndex:'action1'
      ,qtipIndex:'qtip1'
      ,style:'background-color:#f0f0f0;'
     }]}
     ],
     stripeRows: true,
  autoHeight: false,
     viewConfig: {
     forceFit: true
     },
    border: false,
 bbar:[{
     xtype:"button",
        text:"Update Quote",
  enableToggle: true
      },{
        xtype:"button",
        text:"Email Quote",
  enableToggle: true
      },{
        xtype:"button",
        text:"Fax Quote",
  enableToggle: true
      }, '-', {
        xtype:"button",
        text:"Insert New Quote",
  enableToggle: true
 
      }, '-', {
     xtype:"button",
        text:"Clear Quote",
  enableToggle: true
 
      }]
   ,
        plugins:[new Ext.ux.grid.Search({
             mode:'local'
            ,iconCls:false
            ,dateFormat:'m/d/Y'
            ,minLength:2
            ,align:'right'
        })]
 
});
var tabpanel = new Ext.TabPanel({
    border:false,
    activeTab:0,
    tabPosition:'bottom',
    items:[{
    title: 'General Quotes',
    //autoLoad:'quotesgeneral.php',
    autoScroll:true
    },{
      title: 'Truckload Quotes',
      //autoLoad: 'quotestruckload.php',
      autoScroll:true
    },{
      title: 'General Requests',
      autoScroll:true
   },{
      title: 'Residential Quotes Sent',
      autoScroll:true
   },{
     title: 'Truckload Quotes Sent',
     autoScroll:true
   },{
     title:"General Quotes Sent",
     layout:"fit",
     items: quotessent     
     }]
   });
            var viewport = new Ext.Viewport({
            layout: 'border',
            border: false,
            header: false,
            items:[
                new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north',
                    border: false,
                    header: false,
                    height:32
                }), {
                    region:'south',
                    id:'south-panel',
                    title:'Quotes Select',
                    split:true,
                    height: 200,
                    minSize: 100,
                    maxSize: 210,
                    collapsible: true,
                    border:false,
                    margins:'0 0 0 5',
                    layout:'fit',
                    pressed:true,
                    items: tabpanel                       
                },{
                    region:"west",
                    title:"Menubar",
                    width:125,
                    collapsible:true
                },{                
                    region:'center',
                    deferredRender:false,
                    autoScroll:true,
                    header: false,
                    border: false,
                    items:[{
                        title: 'Quote System',
                        header:true,
                        closable:false,
                        autoScroll:true
                    }]
                }
             ]
        });
 
 store.load();                                                                                                              
 
    });
 
 </script>

Im attempting to add this code oviously to where the rows are, at the end where it says Admin Remove. Would like to put 3 buttons there. But am so lost, that i cant even begin to figure out what im doing wrong lol, every time i try soemthing it throws an errror saying object is undefined. Thanks

[jsakalos]

It is grid plugin so you have to put it into grid plugins array and it is also column so it needs to be in column model. Take the demo page code as example, it is included in the download package.

Something like:

var ra = new Ext.ux.grid.RowActions({...});
var grid = new Ext.grid.GridPanel({
    ...
    ,plugins:[....., ra]
    ,columns:[....., ra]
    ...
}); 

[border9]

thx for the quick responce, so i got it to load, but now im having the issue of where exactly do i get the images that are in the CSS file lol. Thanks.

[skhan]

Hi,
I'm having an issue with the text being cut off for an action.
It works fine in Firefox but no in IE.
See attached screen shots
Any ideas?

Thanks

[jsakalos]

thx for the quick responce, so i got it to load, but now im having the issue of where exactly do i get the images that are in the CSS file lol. Thanks.

http://famfamfam.com

[jsakalos]

Hi,
I'm having an issue with the text being cut off for an action.
It works fine in Firefox but no in IE.
See attached screen shots
Any ideas?

Thanks

To tell you truth, I've never meant that somebody will really use text so I haven't tested it. Some css tweak should fix it...

[jsakalos]

To tell you truth, I've never meant that somebody will really use text so I haven't tested it. Some css tweak should fix it...

skhan,

download rowactions now, they should work with text also in ie...