Page 45 of 97 FirstFirst ... 3543444546475595 ... LastLast
Results 441 to 450 of 965

Thread: [1.0] Grid RowActions Plugin

  1. #441
    Sencha User
    Join Date
    Mar 2008
    Posts
    66
    Vote Rating
    0
      0  

    Default cleanup plugin

    Hello saki,
    I have tested the purgeListeners on destroy, this works well thank you

  2. #442
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    Thank you for testing. So I keep it as it is.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #443
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
      0  

    Talking Error: this.ds.fields.get(C) is undefined

    Hi jsakalos,

    i cant find the problem... here the code..

    var user_datastore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: '/admin/users?format=json', method: 'GET'}),
    reader: new Ext.data.JsonReader({root: 'Users', id: 'id', totalProperty: 'Total'},
    [ {name: 'id', mapping: 'id'},
    {name: 'firstname', mapping: 'firstname'},
    {name: 'lastname', mapping: 'lastname'},
    {name: 'login', mapping: 'login'},
    {name: 'email', mapping: 'email'},
    {name: 'state', mapping: 'state'}
    ]),
    remoteSort: true,
    sortInfo: {field: 'id', direction: 'ASC'}});

    var sm = new Ext.grid.CheckboxSelectionModel();

    var action = new Ext.ux.grid.RowActions({
    header:'Actions',
    actions:[{
    iconCls:'show',
    tooltip:'Show'
    },{
    iconCls:'edit',
    tooltip:'Edit'
    },{
    iconCls:'remove',
    tooltip:'Delete'
    }]
    });

    var user_column_model = new Ext.grid.ColumnModel([
    sm,
    {header: 'Firstname', dataIndex: 'firstname'},
    {header: 'Lastname', dataIndex: 'lastname'},
    {header: 'Username', dataIndex: 'login'},
    {header: 'Email', dataIndex: 'email'},
    {header: 'Status', dataIndex: 'state'},
    action
    ]);

    Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.init();

    var ds = user_datastore;
    var cm = user_column_model;
    cm.defaultSortable = true;

    // create the grid
    var grid = new Ext.grid.GridPanel({
    ds: ds,
    cm: cm,
    sm: sm,
    renderTo: 'user-grid',
    width: 550,
    height: 400,
    stripeRows: true,
    viewConfig: {
    forceFit:true
    },

    // inline toolbars
    tbar:[''],
    bbar: new Ext.PagingToolbar({
    pageSize: 20,
    store: ds,
    displayInfo: true,
    displayMsg: 'Record {0} - {1} of {2}',
    emptyMsg: "No records found"
    }),
    plugins:[new Ext.ux.grid.Search({
    position:'top'
    ,minChars:2
    ,autoFocus:true
    }), action]
    });
    action.on({
    action:function(grid, record, action, row, col) {
    switch(action){
    case 'show':
    window.location.href = '/admin/users/' + grid.getStore().getAt(row).data.id;
    break;
    case 'edit':
    window.location.href = '/admin/users/' + grid.getStore().getAt(row).data.id + '/edit';
    break;
    case 'remove':
    if (confirm('delete?')) {
    var conn = new Ext.data.Connection();
    conn.request({
    url: '/admin/users/' + grid.getStore().getAt(row).data.id,
    method: 'POST',
    params: { _method: 'DELETE'
    , authenticity_token: encodeURIComponent('<%= form_authenticity_token %>')
    },
    success: function(response, options){ ds.load(); },
    failure: function(response, options){ alert('Delete operation failed.'); }
    });
    break;
    }
    }
    },
    beforeaction:function() {

    }
    });
    // show record on double-click
    grid.on("rowdblclick", function(grid, row, e) {
    grid.suspendEvents();
    window.location.href = '/admin/users/' + grid.getStore().getAt(row).data.id;
    });

    ds.load({params: {start:0, limit:20}});

    });

    Ok, Firebug give me this report:

    this.ds.fields.get(C) is undefined
    initTemplates()()ext-all....226352671 (line 144)
    initTemplates()(undefined, undefined)ext-all....226352671 (line 144)
    initTemplates()()ext-all....226352671 (line 144)
    initTemplates()(undefined)ext-all....226352671 (line 144)
    initTemplates()()ext-all....226352671 (line 144)
    EventManager()()ext-all....226352671 (line 12)
    EventManager()()ext-all....226352671 (line 12)
    SimpleStore()(Object success=true records=[1] totalRecords=1, Object params=Object, true)ext-all....226352671 (line 43)
    ScriptTagProxy()(Object params=Object request=Object reader=Object, true, Object tId=0 status=200 statusText=OK)ext-all....226352671 (line 50)
    getViewWidth()(function(), Object events=Object conn=Object useAjax=true, [Object params=Object request=Object reader=Object, true, Object tId=0 status=200 statusText=OK 0=Object 1=true 2=Object], undefined)ext-base...226352667 (line 9)
    constructor()(Object tId=0 status=200 statusText=OK)ext-all....226352671 (line 17)
    getViewWidth()(Object conn=XMLHttpRequest tId=0, Object scope=Object argument=Object timeout=30000, undefined)ext-base...226352667 (line 10)
    getViewWidth()()ext-base...226352667 (line 10)

    [IMG]chrome://firebug/content/blank.gif[/IMG]Ext.grid.GridView=function(A){Ext.apply(...Offset:function(){this.setDelta(0,0)}});

    Thanks for your help.

  4. #444
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    @resonante, imagine that only 1% of Ext Forum members would post:
    i cant find the problem... here the code..
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #445
    Ext User cybersys's Avatar
    Join Date
    Feb 2009
    Posts
    40
    Vote Rating
    0
      0  

    Default

    I have the same problem

    here is my code
    Code:
    /*global Ext*/
    Ext.namespace('App.module.attField.grid');
    
    
    App.module.attField.grid = Ext.extend(Ext.grid.GridPanel, {
        
        phpHandler     : "modules/attFields/handleAttFields.php"
        ,tblID        : "id" //the table ID
        ,sort        : "ASC" //default sorting
        ,gridColumn : "TO DO"
        
        ,addBtnText    : "Add New Field"
        ,ipp         : 15
         
         
    
         
        ,initComponent:function() {
            
        function renderCheckBox (value){
                return "<input type='checkbox'" + (value ? "checked='checked'" : "") + ">";
        }
        
        this.onRowAction = function (grid, record, action, row, col) {
            switch (action) {
                case 'icon-minus' :
                    alert("do delete");
                    break;
    
                case 'action1' :
                    alert("action1");
                    break;
            }
        }
        
        this.rowActions = new Ext.ux.grid.RowActions({
                header:'Actions'
                ,id : 'actions'
                ,actions : [{
                            
                            iconCls : 'icon-minus',
                            qtip : 'Delete Record'
                        }]
                
            });
        
        this.rowActions.on('action', this.onRowAction);
    
            
        
        //Define RECORD
        this.gridRecord = Ext.data.Record.create(
            [
                {name: "id", type: 'int', mapping: "id"}
                ,{name: "name",  mapping: "name"}
                ,{name: "handler",  mapping: "handler"}
                ,{name: "isEnable", type: 'int', mapping: "isEnable"}
                ,{name: "isRequired", type: 'int', mapping: "isRequired"}
                ,{name: "inList", type: 'int', mapping: "inList"}
                ,{name: "inDetails", type: 'int', mapping: "inDetails"}
                ,{name: "isFiltering", type: 'int', mapping: "isFiltering"}
                ,{name: "isComparable", type: 'int', mapping: "isComparable"}
            ]
        );
        
        //Multiple Select CheckBox
        this.sm = new Ext.grid.CheckboxSelectionModel();
        
        //row numbers
        this.numberer= new Ext.grid.RowNumberer();
    
        //Define COLUMN MODEL
        this.cm=new Ext.grid.ColumnModel( 
            [
                this.numberer
                ,this.sm
                { header: '#',dataIndex: "id",width: 40,readOnly: true }                                    
                ,{ header: 'Field',dataIndex: "name", width: 250,readOnly: true  }
                ,{ header: 'Handler',dataIndex: "handler", width: 180,readOnly: true  }
                ,{ header: 'Visible',dataIndex: "isEnable", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,{ header: 'Required',dataIndex: "isRequired", width: 80 ,align:"center" /*,renderer: renderCheckBox */, sortable:false ,menuDisabled:true}
                ,{ header: 'inList',dataIndex: "inList", width: 80 ,align:"center"/*,renderer: renderCheckBox*/ , sortable:false ,menuDisabled:true}        
                ,{ header: 'inDetails',dataIndex: "inDetails", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,{ header: 'Filtering',dataIndex: "isFiltering", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,{ header: 'Comparable',dataIndex: "isComparable", width: 80 ,align:"center" /*,renderer:renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,this.rowActions
            ]
            
        ); 
        this.cm.defaultSortable= true;
        
        this.plugins=this.rowActions;
        
        // create DATA STORE
        this.ds = new Ext.data.Store({
              id: 'gridDS'
              ,scope: this
              ,proxy: new Ext.data.HttpProxy({
                        url: this.phpHandler 
                        ,method: 'POST'
                    })
                ,baseParams:{task: "LISTING"} // this parameter is passed for any HTTP request
                    
                ,reader: new Ext.data.JsonReader({
                    root: 'results'
                    ,totalProperty: 'total'
                    ,id: this.tblID
                  }
                  ,this.gridRecord
                  )
                  ,sortInfo:{field: "id", direction: this.sort}
            });
        
        //create GRID tbar
        this.tbar=new Ext.Toolbar({
            items :[
                      { text: this.addBtnText 
                        ,tooltip: this.addBtnText
                        ,iconCls:'add'
                        ,scope:this
                        ,handler:function() {this.winShow("INSERT"); }
                      }
                      , '-'
                      , { text: 'Delete selection', tooltip: 'Delete the Selected Jokes', iconCls:'remove'
                        //handler: confirmDeletePages,   
                      }, 
                      '-'
                      , { text: 'Search', tooltip: 'Advanced Search',iconCls:'search'
                        //handler: startAdvancedSearch,   
                      }, '-', 
                    ]
        })
        //create GRID bbar
        this.bbar=new Ext.PagingToolbar({
                    pageSize: this.ipp
                    ,store: this.ds
                    ,displayInfo: true
        })
                
    
    
    
    /*
        Ext.apply(this, {
        
                    //plugins:[this.rowActions]
                    });
    */
        
    
        
        
        //superclass.initComponent
        App.module.attField.grid.superclass.initComponent.apply(this, arguments);
        
        
        } // eo function initComponent
     
        ,initEvents:function() {
             App.module.attField.grid.superclass.initComponent.apply(this, arguments);
            
        } // eo function initEvents
     
     
     
        ,onRender:function() {
            
    
            App.module.attField.grid.superclass.onRender.apply(this, arguments);
            
            this.store.load({params: {start: 0, limit: 15}});
        } // eo function onRender
    });
     
    Ext.reg('attFieldGrid', App.module.attField.grid);
    The strange thing is that the grid is working without rowaction AND its working with rowaction only if total columns including rowaction is below 10

    I mean with 6 columns and rowaction the above implementation works

    With 9 columns and rowaction the above implementation its NOT working

    I also try to original Saki's example to increase the columns and i get the same error
    [ this.ds.fields.get(C) is undefined ]

    After debuging (Firebug) when its try to draw the rowaction is the problem.All other columns are rendered

    Am i doing something wrong.

    Please help
    Still trying to Lear ExtJs

  6. #446
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    Please post a working showcase, I'll take a look.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #447
    Ext User cybersys's Avatar
    Join Date
    Feb 2009
    Posts
    40
    Vote Rating
    0
      0  

    Default

    Here is the working showcase

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <style type="text/css" >
            .icon-minus {
                background-image: url('delete.png') !important;
            }
            
            .icon-edit-record {
                background-image: url('application_form_edit.png') !important;
            }
            </style>
     
     
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
            <script type="text/javascript" src="Ext.ux.grid.RowActions.js"></script>
     
     
            <!-- page specific -->
            
            
            
            
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
            Ext.namespace('App.module.attField.grid');
            
        Ext.onReady(function(){
     
                
    
    
    
        App.module.attField.grid = Ext.extend(Ext.grid.GridPanel, {
        
    
        initComponent:function() {
            
        function renderCheckBox (value){
                return "<input type='checkbox'" + (value ? "checked='checked'" : "") + ">";
        }
        
        this.onRowAction = function (grid, record, action, row, col) {
            switch (action) {
                case 'icon-minus' :
                    alert("do delete");
                    break;
    
                case 'action1' :
                    alert("action1");
                    break;
            }
        }
        
        this.rowActions = new Ext.ux.grid.RowActions({
                header:'Actions'
                ,id : 'actions'
                ,actions : [{
                            
                            iconCls : 'icon-minus',
                            qtip : 'Delete Record'
                        }]
                
            });
        
        this.rowActions.on('action', this.onRowAction);
    
        
        //Multiple Select CheckBox
        this.sm = new Ext.grid.CheckboxSelectionModel();
        
        //row numbers
        this.numberer= new Ext.grid.RowNumberer();
    
        //Define COLUMN MODEL
        this.cm=new Ext.grid.ColumnModel( 
            [
                this.numberer
                ,this.sm
                ,{ header: '#',dataIndex: "id",width: 40,readOnly: true }                                    
                ,{ header: 'Field',dataIndex: "col1", width: 250,readOnly: true  }
                ,{ header: 'Handler',dataIndex: "col2", width: 180,readOnly: true  }
                ,{ header: 'Visible',dataIndex: "col3", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,{ header: 'Required',dataIndex: "col4", width: 80 ,align:"center" /*,renderer: renderCheckBox */, sortable:false ,menuDisabled:true}
                ,{ header: 'inList',dataIndex: "col5", width: 80 ,align:"center"/*,renderer: renderCheckBox*/ , sortable:false ,menuDisabled:true}        
                ,{ header: 'inDetails',dataIndex: "col6", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                //,{ header: 'Filtering',dataIndex: "col7", width: 80 ,align:"center" /*,renderer: renderCheckBox , sortable:false ,menuDisabled:true*/}
                //,{ header: 'Comparable',dataIndex: "col8", width: 80 ,align:"center" /*,renderer:renderCheckBox , sortable:false ,menuDisabled:true*/}
                ,this.rowActions
            ]
            
        ); 
        this.cm.defaultSortable= true;
        
        this.plugins=this.rowActions;
        
        
        this.myData = [
            [1,2,3,4,5,6,7,8,9,10],
            [1,2,3,4,5,6,7,8,9,10],
            [1,2,3,4,5,6,7,8,9,10],
            [1,2,3,4,5,6,7,8,9,10]
        ];
    
        
        
        // create the data store
        this.ds = new Ext.data.SimpleStore({
            fields: [
               {name: 'id'},
               {name: 'col1'},
               {name: 'col2', },
               {name: 'col3', },
               {name: 'col4', },
               {name: 'col5' },
               {name: 'col6'},
               {name: 'col7', },
               {name: 'col8', },
               {name: 'col9', },
               {name: 'col10' }
            ]
        });
    
        
        
        //create GRID tbar
        this.tbar=new Ext.Toolbar({
            items :[
                      { text: this.addBtnText 
                        ,tooltip: this.addBtnText
                        ,iconCls:'add'
                        ,scope:this
                        ,handler:function() {this.winShow("INSERT"); }
                      }
                      , '-'
                      , { text: 'Delete selection', tooltip: 'Delete the Selected Jokes', iconCls:'remove'
                        //handler: confirmDeletePages,   
                      }, 
                      '-'
                      , { text: 'Search', tooltip: 'Advanced Search',iconCls:'search'
                        //handler: startAdvancedSearch,   
                      }, '-', 
                    ]
        })
        //create GRID bbar
        this.bbar=new Ext.PagingToolbar({
                    pageSize: this.ipp
                    ,store: this.ds
                    ,displayInfo: true
        })
                
        
        //superclass.initComponent
        App.module.attField.grid.superclass.initComponent.apply(this, arguments);    
        } // eo function initComponent
     
        ,initEvents:function() {
             App.module.attField.grid.superclass.initComponent.apply(this, arguments);
            
        } // eo function initEvents
     
        
     
     
        ,onRender:function() {
            
    
            App.module.attField.grid.superclass.onRender.apply(this, arguments);
            
            this.store.loadData(this.myData);
        } // eo function onRender
    });
     
            Ext.reg('attFieldGrid', App.module.attField.grid);
    
            field_grid = new App.module.attField.grid({
                el : "test"
                ,title            : 'Attribute Fields'
                ,height:500
                ,loadMask:true
            })
        
            field_grid.render();
    
     
            }); //end onReady
            </script>
     
        </head>
        <body>
        
        <div id="test"></div>
        
        </body>
    </html>
    I hope i did right

    if you uncomment the 2 columns on cm you will get the error

    Thanks a lot
    Still trying to Lear ExtJs

  8. #448
    Ext User Enrico's Avatar
    Join Date
    Mar 2007
    Location
    Berlin, Germany
    Posts
    17
    Vote Rating
    0
      0  

    Default

    Hi saki,

    thank you for all your great plugins.

    I needed hideable group actions which are currently not supported. For the sake of completeness I share the snippet here

    Enrico

    Code:
    ,tplGroup:
    	 '<tpl for="actions">'
    	+'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
    	+'{cls}" style="{hide}{style}" qtip="{qtip}">{text}</div>'
    	+'</tpl>'

  9. #449
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    406
      0  

    Default

    And where's problem? This is what I get:
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  10. #450
    Ext User cybersys's Avatar
    Join Date
    Feb 2009
    Posts
    40
    Vote Rating
    0
      0  

    Default

    YES its working as it is


    UNCOMMENT THE 2 COLUMNS THAT ARE COMMENT IN THE COLUMN MODEL AND IT WONT WORK


    Thanks again
    Still trying to Lear ExtJs

Page 45 of 97 FirstFirst ... 3543444546475595 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •