Adding/removing fields and columns

[revortado]

Condor.... try again the removeColumn with your new code, and it works like a charm...

thanks!

[Condor]

By the way, still having a problem, when adding columns after the first one... the grid records are only show for the first column...

I don't follow what you are trying to do... Could you post an example of this?

[revortado]

Sorry not make myself clear enough...
What i'm doing in this... draging a row from gridA to gridB, when the drop event occur a new column is create in the gridB, the i reload a store on the gridB that brings the result with the new column add...
The problem i'm facing is that the first time (first column drop), the grid loads the records ok, and the data appear... in the second and so on new columns the record is reloaded but the data appear only on the first grid dropped, the others don't show their data...


- understand gridB as secondGrid in the snipe code:

The code to drop, add new column and reload the store:

var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
						ddGroup    : 'secondGridDDGroup',
						copy       : false,
						notifyDrop : function(ddSource, e, data) {						
							
							function addColumn(record, index, allItems) {
								
								// Search for duplicates
								var foundItem = secondGrid.getColumnModel().findColumnIndex(record.get("CAMPOS"));
								
								// if not found
								if (foundItem  == -1) {
									//Remove Record from the source
									ddSource.grid.store.remove(record);
									
									// novo campo da grid
									var nome = record.get("CAMPOS");
									
									// Adiciona a coluna
									secondGrid.addColumn({ header: nome, dataIndex: nome });								
									
									// Carrega a grid com os novos valores
									secondGrid.getStore().load({params: { id_query: Ext.get("query").getValue() }});
									
									
									
								}
	
	
							}
							
							// Loop through the selections
							Ext.each(ddSource.dragData.selections, addColumn);
							return(true);
						}
					});

The store:

			    // Busca pelo registro no formato JSON 
				var secondGridStore = new Ext.data.Store({
					remoteSort: true,
					proxy: new Ext.data.HttpProxy({
						url: '<?php print $this->baseUrl ?>/design/listarregistros',
						method: 'POST'
					}),
					reader: new Ext.data.JsonReader({
						root: 'OBJ',
						totalProperty: 'TOTAL',
						fields: []
					})
				});

and the data itself:

{"OBJ":[{"ID":"1","DESCRICAO":"NORMAL"},{"ID":"2","DESCRICAO":"ASCENDENTE"},{"ID":"3","DESCRICAO":"DESCENDENTE"
}],"TOTAL":3}

thanks

[Condor]

I would advise to create secondStore with all possible fields an only add the columns to secondGrid (for already existing data), e.g.

secondGrid.getColumnModel().addColumn({header: nome, dataIndex: nome});

[revortado]

Thanks condor... try the code with your correction, and now even the first column inserted doesn't show the record data...
Tell me something about the code addField that you override... te line:

this.recordType.prototype.fields.replace(field);

Come from where... the this.recordType i undestand, is a property of the store, the prototype i know too (you are adding a new field to the function that is inside this.recordType)... but the the rest of the expression is a bit of strange... after all, the fields.replace already exists inside this.recordType?

Unfortunately, my system demands that i do this dynamic operation...

thanks...

[revortado]

Condor... solve my problem... to do what i want, just need to sendo toghter with the data a metaData param of the object as descrived here:

http://extjs.com/deploy/dev/docs/out...sonReader.html

For people how will face the same problem as i:

It is possible to change a JsonReader's metadata at any time by including a metaData property in the data object. If this is detected in the object, a Store object using this Reader will reconfigure itself to use the newly provided field definition and fire its metachange event. In undergoing this change, the Store sets its sortInfo property from the sortInfo property in the new metadata. Note that reconfiguring a Store potentially invalidates objects which may refer to Fields or Records which no longer exist.

{
    metaData: {
        totalProperty: 'results',
        root: 'rows',
        id: 'id',
        fields: [
            {name: 'name'},
            {name: 'occupation'}
        ]
    },
    results: 2,
    rows: [
        { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
        { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
    ]
}

... now my work is almost done!

[wanwan2277]

Hello Condor, thanks for your sharing. It's easy to add columns into the grid by your code.
In my requirement, I need requery this grid to get other info.
so there are some different columns into this grid after the second query.
But, there is a problem, some column's value is disappear when I query the second time.
I check a lot of part of the code, but the problem is still lived.

1. data from DB (.Action file) is ok.
2. store is ok.
3. column headers are displayed. (ok)

the following is my code.

thisPage.onSearchPlanTwoWeekClick = function() {

 //remove column
 for(i=columnName.length-1;i>-1;i=i-1){ 
   
  thisPage.weeklyPlanGridPane.removeColumn(columnName[i]);
  columnName.pop();
 }
 thisPage.OSPPlanInventoryStore.removeAll();
 
 Ext.Ajax.request({
  url : 'GetOSPCommonComposAction.action',
  method : 'POST',
  timeout : 1800000,
  success : function(result, request) {
  jsonQuerySeq = Ext.util.JSON.decode(result.responseText);
  storeName = '';
   
   for(i=0;i<jsonQuerySeq.rows.length;i=i+1){ 
    if(i!=0){
     storeName = storeName+',';
    }
    storeName = storeName+'{name:'+Ext.util.JSON.encode(jsonQuerySeq.rows[i].compos).substring(1,13)+'}';
    columnName[i] = Ext.util.JSON.encode(jsonQuerySeq.rows[i].compos).substring(1,13);
    thisPage.weeklyPlanGridPane.addColumn(
     {name:Ext.util.JSON.encode(jsonQuerySeq.rows[i].compos).substring(1,13)},
     {header : Ext.util.JSON.encode(jsonQuerySeq.rows[i].compos).substring(1,13), align : 'center', width : 100, dataIndex : Ext.util.JSON.encode(jsonQuerySeq.rows[i].compos).substring(1,13)});
    
   }

   thisPage.OSPPlanInventoryStore.removeAll();
   thisPage.OSPPlanInventoryStore.reload({
       callback:function(r, options, success){
          if (success){
          }else{
                thisPage.OSPPlanInventoryStore.removeAll();
         }       
       },timeout:9000000
   });
   
   
  }
 });
 
}

[Condor]

Does the reloaded store contain data for all fields (including the ones you added)?

[wanwan2277]

Yeah! I displayed the store data, and it included the columns I added.
I think action data is ok, but it is not completely loaded into the store.
When the column's position and data is the same as the previous querying one, the store data will show up, otherwise is not.
It's so weird....

[revortado]

hi there wanwan... the solution that i found to my problem with the new columns is describe in my last post in this thread... i send toghter with the data model a column model to the store. This way the columns are add, and is be alive in my grid...
Check my last post please, if this doens't solve your problem, be sure... cordor is the best guy to help you out with this... i just as you still learn ExtJs

thanks