Results 1 to 5 of 5

Thread: How to iterate through grid to disable the components in it?

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    56

    Post How to iterate through grid to disable the components in it?

    Hi,

    I am facing problem in iterating through the grid and disabling few components of in a particular row.

    I have a grid with two rows. At first all components in grid will be disabled. On load of store, based on some condition, i have to enable just last three cells in the first row.

    Since i am enabling the components on store load, all the cells are getting enabled... Even i have changed the cls to reflect the disabled effect.. thats working. But actual disabling of textfield is not happening.

    Code goes like this
    Code:
    vvar stateGrid =  Ext.extend(Ext.grid.GridPanel, {
    	  initComponent:function() {
    		  var config = {
    		  store: stateStore,		
    		  columns: [		            
    		            {
    		            	header: "ID",
    		            	id:'MID',
    		            	disabled:true,
    		            	width:50,
    		            	dataIndex: 'MID'
    		            },
    		            {
    		            	header: "State",
    		            	width:50,
    		            	dataIndex: 'stateVal',
    				editor:new fm.TextField({
    		            	id:'stateVal',
    						disabled : true
    				}),
    						renderer: function(value, metaData, record, rowIndex, colIndex, store) {		            		 
    		            	 	metaData.css = 'x-grid-disabled';
    		            	 	return value;
    		            	}
    		            },
    					{
    		            	header: "Process",		            	
    		                disabled:true,
    		            	width:50,
    		            	dataIndex: 'processVal',
    						editor:new fm.TextField({
    		            		id:'processVal',
    							disabled : true
    						}),
    						renderer: function(value, metaData, record, rowIndex, colIndex, store) {		            		 
    		            	 	metaData.css = 'x-grid-disabled';
    		            	 	return value;
    		            	}
    		            },
    					{
    		            	header: "Book",		            	
    		                disabled:true,
    		            	width:50,
    		            	dataIndex: 'bookVal',
    						editor:new fm.TextField({
    		            		id:'bookVal',
    							disabled : true
    						}),
    						renderer: function(value, metaData, record, rowIndex, colIndex, store) {		            		 
    		            	 	metaData.css = 'x-grid-disabled';
    		            	 	return value;
    		            	}
    		            }
    
    		  ],
    		  defaultSortable:false,		 
    		  trackMouseOver : false,
    		  enableColumnMove: false,
    		  bodyStyle:'padding-bottom: 5px;',		
    		  loadMask:{
    			  msg:'Loading...'
    		  },
    		  view:new Ext.grid.GridView({ 
    			   emptyText:'State Data Not Available',
    			   forceFit: true, 
    			   scrollOffset: 0,
    			   forceFit:true,
    			   markDirty : false
    			})		  
    		  };
    		Ext.apply(this, Ext.apply(this.initialConfig, config));
    		stateGrid.superclass.initComponent.apply(this, arguments);
    		
    }
    ,onRender:function() {  
    	stateGrid.superclass.onRender.apply(this, arguments);	
    }
    });
    Store on load
    Code:
    stateStore.on({
        'load':{
            fn: function(store, records, options){		
    			var ioState= Ext.getCmp('ModuleState').getValue();
    			var cell;
    			var element;
    			if(isModify && ioState == 'enable'){	
    				Ext.getCmp('stateVal').enable();
    			    Ext.getCmp('processVal').enable();
    			    Ext.getCmp('bookVal').enable(); // this enables the columns in both the rows.
    				for(var i=1; i<=3 ; i++){					
    					//trying to get cells from 1to 3 in row 1
    					var cell = Ext.getCmp('stateGrid').getView().getCell(1, i);			
    					var el = Ext.get(cell);		
    					el.disabled(true);	// this portion is not working. I am not able to disable the columns 1,2, 3 in 2nd row 
    				  
    				}
    			}
    			
            },
            scope:this
        }
    });
    Can any one pls help me on this??

  2. #2
    Sencha Premium Member rivarecords's Avatar
    Join Date
    Apr 2010
    Location
    Fredrock, MD
    Posts
    24

    Default

    Code:
     
    stateStore.on({
        'load':{
            fn: function(store, records, options){  
       var ioState= Ext.getCmp('ModuleState').getValue();
       var cell;
       var element;
       if(isModify && ioState == 'enable'){ 
        Ext.getCmp('stateVal').enable();
           Ext.getCmp('processVal').enable();
           Ext.getCmp('bookVal').enable(); // this enables the columns in both the rows.
        
        Ext.each(store.getRange(0, store.getCount()), function(row,index){
             for(var i=1; i<=3 ; i++){     
             //trying to get cells from 1to 3 in row 1
             var cell = Ext.getCmp('stateGrid').getView().getCell(index, i);   
             var el = Ext.get(cell);  
             el.disabled(true);
         }   
        })
        
       }
       
            },
            scope:this
        }
    });

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    56

    Default

    Hi,

    Thanks for your suggestion. But still i am getting the same problem.


    el.disabled is not a function
    for the line
    Code:
      el.disabled(true);
    disable/disabled function is not applicable to element. Is there any way to get the component , i mean the textfield present in the grid, so that component can be disabled?

  4. #4
    Sencha Premium Member rivarecords's Avatar
    Join Date
    Apr 2010
    Location
    Fredrock, MD
    Posts
    24

    Default

    Sorry, I didn't test it. I didn't think that would work.
    This should disable the cell:

    Code:
     
      var cell = Ext.getCmp('stateGrid').getView().getCell(index, i);   
             cell.disabled=true;
    If you want to disable the editor, try:

    Code:
     
    var editor =  Ext.getCmp('stateGrid').getColumnModel().getCellEditor(i,index);
         editor.setDisabled(true);

  5. #5

    Default Object doesn't support this property or method error in using el.disabled

    Code:
      
       var storeData = Ext.ComponentQuery.query('#gridId')[0].getStore();
       var cell ;
       cell =Ext.ComponentQuery.query('#gridId')[0].getView().getCell(storeData.getAt(0),
               Ext.ComponentQuery.query('#gridId')[0].headerCt.child('#appr'));
     // cell.disable ();
     // cell.setDisabled(true)
    // cell.disabled=true;
    All the above seems to give 'Object doesn't support this property or method '. I tried the Ext.each loop mentioned in the previous solutions also and I face the same issue

Similar Threads

  1. Iterate grid and add class to row
    By michiel in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 12 Aug 2010, 5:03 AM
  2. Iterate through all Ext.grid.EditorGridPanel entries
    By aaronbartell in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Aug 2010, 6:15 AM
  3. How to to iterate over rows in the grid without selecting them.
    By vinaykuma201 in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 6 Jul 2009, 1:01 AM
  4. [SOLVED][2.2] FormPanel.enable() enables disable=true components
    By buglierjul in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 13 Sep 2008, 6:54 AM
  5. Grid grid lines - iterate records
    By gregsimons in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 14 Jun 2007, 11:46 PM

Posting Permissions

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