1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    21
    Vote Rating
    0
    dougd_unc is on a distinguished road

      0  

    Default simulating actioncolumn in 3.2.1

    simulating actioncolumn in 3.2.1


    I am using 3.2.1. I want to have an action column such as

    http://dev.sencha.com/deploy/ext-3.3...rray-grid.html

    But, I don't think that came out until 3.3. How can I make a column, similar to an action column where a user clicks an icon and it removes that row in the grid?

    This doesn't seem to work as a column in the grid, I get a javascript error:
    Code:
               {
                    xtype: 'actioncolumn',
                    width: 50,
                    items: [{
                        icon   : '<URL TO IMG GOES HERE>',  // Use a URL in the icon config
                        tooltip: 'Sell stock',
                        handler: function(grid, rowIndex, colIndex) {
                                         alert('just testing')
                        }
                    }]
                }
    --Doug

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Location
    USA
    Posts
    111
    Vote Rating
    0
    aramaki is on a distinguished road

      0  

    Default


    I hope code below will helpfull...

    Code:
    /**
     *  class App.FolderColumn
     *  @cfg header
     *  @cfg urlCtrl : controller name
     *  @cfg urlAction: action name
     */
    
    App.FolderColumn = Ext.extend(Ext.grid.Column, {
        header: 'Folder',
        urlCtrl: null,
        urlAction: 'makeFolder',
    
        constructor: function(cfg){
            App.FolderColumn.superclass.constructor.call(this, cfg);
    
            this.width = 45;
    
            this.renderer = function(v, meta, r){
                var imgSrc, alt, cnt_str = undefined;
                if(v.exists) {
                    imgSrc = 'images/folder.gif',
                        cnt_str = '<b>' + v.count + '</b>',
                        alt = (v.count > 1 || v.count == 0) ? cnt_str + ' files' : cnt_str + ' file';
                } else {
                    imgSrc = 'images/folder_empty.gif',
                        alt = 'Create folder';
                }
    
                var href = '#',  
                    id = Ext.id(),
                    html = '<a id="'+id+'" href="'+href+'" target="_blank"><img src="'+imgSrc+'" ext:qtip="'+alt+'"/></a>';
                        
                
                this.makeFolder.defer(1, this, [id, v]);
                
                return html;
            }
        },
    
        makeFolder : function(id, v) {
    
            var v = v;
            Ext.fly(id).on('click', function(ev){
                ev.stopEvent(); 
                [... whatever you want....]
    
                        } ,this);   
                }
             },
           this)
        }
    
    });
    
    // register
    Ext.grid.Column.types.foldercolumn = App.FolderColumn;
    and implement:

    Code:
    {
      xtype: 'foldercolumn', 
      urlCtrl: 'outboundRequest', 
      dataIndex: 'folder'
    },

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    21
    Vote Rating
    0
    dougd_unc is on a distinguished road

      0  

    Default


    Hello,

    I copied and pasted the code, but it did not parse correctly. I really don't know enough about extjs to know what the code is supposed to look like.

    Also, I see it does something with a folder. I just need a single icon at the end of the row that a user can click to take an action, not really any type of "container".

    However, this did give me the idea of looking into to create my own column type. I will try that.

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Location
    USA
    Posts
    111
    Vote Rating
    0
    aramaki is on a distinguished road

      0  

    Default


    yes, this is just an idea and partt of working example (some parts of code was erased)
    If you need the complete solution, let us know

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    21
    Vote Rating
    0
    dougd_unc is on a distinguished road

      0  

    Default


    Is there any documentation that you can point me to about extending Ext.grid.Column?

    I just tried something simple:

    Code:
    var AspActionColumn = Ext.extend(Ext.grid.Column, {
        header: '',
    
        constructor: function(cfg){
            AspActionColumn.superclass.constructor.call(this, cfg);
    
            this.width = 45;
    
            this.renderer = function(v, meta, r){
                    var id = Ext.id();
                    var html;
                    html = '<a id="'+id+'" href="#" ><img src="<URL HERE>/img/delete.png"></a>';
                return html;
            }
        },
    });
    
    // register
    Ext.grid.Column.types.aspactioncolumn = AspActionColumn;
    and in my columns, I added
    {
    xtype: 'aspactioncolumn',
    }

    But when I add a new row, there is a javascript error. I would like to be able to attach an event to the clicking of the icon, but I can't even get that far.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Location
    USA
    Posts
    111
    Vote Rating
    0
    aramaki is on a distinguished road

      0  

    Default


    do you have editable grid and add the row? which type of error? what is AspActionColumn when grid start render?

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    21
    Vote Rating
    0
    dougd_unc is on a distinguished road

      0  

    Default


    After changing JS to ext-all-debug.js, the error is:

    this.ds.fields.get(i) is undefined

    and it appears to be looking for matching data for the column in the ArrayStore. The problem is, this column is not meant to hold data. It's just to put one icon in.

    I'm not sure of the answer to the rest of your questions.

    Also, in your previous example, it looks as though urlAction connects an onClick to a function called makeFolder. Is urlAction part of the extjs library? I can't find anything about it in 3.2.1, or maybe I don't know where to look. I would also like an onclick that calls a function.



    Code:
    var AspActionColumn = Ext.extend(Ext.grid.Column, {
        header: '',
    
        constructor: function(cfg){
            AspActionColumn.superclass.constructor.call(this, cfg);
    
            this.width = 45;
    
            this.renderer = function(v, meta, r){
    				var id = Ext.id();
    				var html;
    				html = '<a id="'+id+'" href="#" ><img src="/lcl/ded/system/themes/asp/img/delete.png"></a>';
                return html;
            }
        }
    });
    
    // register
    Ext.grid.Column.types.aspactioncolumn = AspActionColumn;
    
    
    //data store for the grid
    var store = new Ext.data.ArrayStore({
        id: 'menteeStore',
        fields: [
           {name: 'first_name', type: 'string'},
           {name: 'last_name', type: 'string'},
           {name: 'email', type: 'string'},
           {name: 'cohort', type: 'string'},
           {name: 'expire_date', type: 'date', dateFormat: 'm/d/Y'}
        ]
    	 
    });
    
    
    Ext.onReady(function(){
    
    	Ext.QuickTips.init();
        Ext.QuickTips.getQuickTip().interceptTitles = true;
    	
        Ext.form.Field.prototype.msgTarget = 'side';
        // default template structure for combobox hover messages
        var tplstr = '<tpl for="."><div ext:qtip="{description}" class="ux-mselect-item ';
    	if(Ext.isIE || Ext.isIE7){
        	tplstr = tplstr + '" unselectable=on>{name}</div></tpl>';
        }
        else{
        	tplstr = tplstr + ' x-unselectable">{name}</div></tpl>';
        }
    
    // Generic function to build the grid    
    function getGrid(){
    
    		if(Ext.getCmp('grid')){
    			gridPanel.removeAll();	
    		}
    			
    		var name_editor = new Ext.form.TextField({
    			allowBlank: false,
    			/* mode: 'local', */
    			triggerAction: 'all'});
    
    		// TODO: use email regexp
    		var email_editor = new Ext.form.TextField({
    			allowBlank: false,
    			vtype: 'email',
    			vtypeText: 'Please enter a valid email address' });
    
    		var cohort_editor = new Ext.form.TextField({
    			allowBlank: true,
    			/* mode: 'local', */
    			triggerAction: 'all'});
    
    		var date_editor = new Ext.form.DateField({
    			allowBlank: true,
    			xtype: 'datefield',                                 
        		format: 'd/m/Y'});
    			
    
    		//store.load();
    
    
    		// columns in grid
    		var tblColumns =  [
    		    {header: "First Name", width: 150, sortable: false, dataIndex: 'first_name',  editor: name_editor },
    		    {header: "Last Name", width: 150, sortable: false, dataIndex: 'last_name', editor: name_editor },
    		    {header: "Email", width: 200, sortable: false, dataIndex: 'email', editor: email_editor },
    		    {header: "Cohort / Group", width: 100, sortable: false, dataIndex: 'cohort', allowBlank: true, editor: cohort_editor },
    		    {header: "Expire Date", width: 100, sortable: false, dataIndex: 'expire_date', allowBlank: true, editor: date_editor, renderer: Ext.util.Format.dateRenderer('m/d/Y') },
    			{
      				xtype: 'aspactioncolumn' 
    			}
           
    		];
    			
    		// grid of associations
    		var grid = new Ext.grid.EditorGridPanel({
    				id:'student_grid',
    				store: store,
    				columns: tblColumns,
    				height: 250,
    				stripeRows: true,
    				anchor: '100% 100%',
    				loadMask: false,
    				bbar:[
    				{
    				    text: 'Add Student To List',
    				    iconCls: 'add',
    				    handler: function(){
    				    var u = new grid.store.recordType({
    		    				first_name: '',
    		    				last_name: '',
    		    				email: ''
    		    			});
    				      grid.stopEditing();
    				      grid.store.add(u);
    				    	grid.startEditing(grid.store.getCount()-1, 0);
    				    }
    				}, 
    	
    				{
    					text: 'Remove Student From List',
    				    iconCls: 'destroy',
    				    handler: function(){
                		var sm=grid.getSelectionModel();
                    	var sel=sm.getSelectedCell();
    						if (sel != null) {
    							var index=sel[0];
                      	data = grid.store.getAt(index);
                      	grid.store.removeAt(index);
    						}
    				    }
    				},
    
    				{
    					text: 'Invite Everyone in List',
    				  	iconCls: 'save',
    				  	handler: function(){
    
    						var gridData = new Array();
    						store.each(function (record) {
        						gridData.push(record.data);
    						});
    							  
    						$('invite_grid_data').value = Ext.encode(gridData);
    						$('em_invite_mentor').onsubmit();
    				  	}
    				}
    				] 
    			});
    			
    
    		var students = new Ext.form.FormPanel({ 
    			formId : 'student_editor_form', 
    			id : 'student_editor', 
    			plain : true, 
    			border : true, 
    			anchor : '100%', 
    			applyTo : 'table_content', 
    			items : [grid]
    
    		});
    
    		
    	}
    
    	getGrid();
    
    });

  8. #8
    Sencha User
    Join Date
    Jun 2010
    Posts
    21
    Vote Rating
    0
    dougd_unc is on a distinguished road

      0  

    Default


    Ok, finally got it so that it works:

    Code:
    var AspActionColumn = Ext.extend(Ext.grid.Column, {
        header: 'Remove',
    	 menuDisabled: true,
    	 editable: false,
    	 sortable: false,
    
        constructor: function(cfg){
            AspActionColumn.superclass.constructor.call(this, cfg);
    
            this.width = 60;
    
            this.renderer = function(value, metaData, record, rowIndex, colIndex, store) {
    				var id = Ext.id();
    				var html;
    
    				html = '<a id="'+id+'" href="#" ><img border="0" src="<PATH HERE>/img/delete.png"></a>';
    
                this.setupOnClick.defer(1, this, [id, store, rowIndex]);
    
                return html;
    
            }
        },
    	setupOnClick: function(id, store, rowIndex)
    	{
    		var grid = Asp.invite.grid;
    		var rowIndex = rowIndex;
    		var store = store;
    		var rowElement = grid.getView().getRow(rowIndex);
    
    		Ext.fly(id).on('click', function(ev) {
    			ev.stopEvent();
    
    			var currentIndex = grid.getView().findRowIndex(rowElement);
    
    			if (confirm('Are you sure you want to delete this mentee?'))
    			{
                store.removeAt(currentIndex);
    			}
    
    		}, this);
    	}
    });

  9. #9
    Sencha User
    Join Date
    Mar 2013
    Posts
    5
    Vote Rating
    0
    gmprakashlivingstone is on a distinguished road

      0  

    Default


    Hi Buddy,
    Could you please post me the solution ,am just looking out for the same funtionality ...