Hola,
¿puede hacerse que la info que metemos en un Pivot Grid se muestre en un form como cuando se hace por ejemplo Binding Grid in a form? o abrir una ventana en la que se muestre la info de una fila que seleccionemos en el pivot grid? este es mi pivot grid

Código: Seleccionar todo

Ext.onReady(function() {
var SaleRecord = Ext.data.Record.create([
        {name: 'Cod',   type: 'string'},
        {name: 'Food_use',  type: 'string'},
        {name: 'Subject_en',     type: 'string'},
]);
   
    var myStore = new Ext.data.Store({
        url: 'data/valor.json',
        autoLoad: true,
        reader: new Ext.data.JsonReader({
            root: 'rows',
            idProperty: 'id'
        }, SaleRecord)
    });
var pivotGrid = new Ext.grid.PivotGrid({
        title     : 'Valorización',
        width     : 800,
        height    : 400,
        renderTo  : 'docbody',
        store     : myStore,
        aggregator: 'count',
        measure   : 'Cod',
        stripeRows: true,
        viewConfig: {
            title: 'Alfa-3'
         
        },
       
        leftAxis: [
            {
                width: 80,
                dataIndex: 'Cod'
            }
],
       
        topAxis: [
            {
                dataIndex: 'Food_use'
            },
            {
                dataIndex: 'Subject_en'
            }
        ]
    });
   
});


claro que puedes, si te fijas en la API, el Pivot Grid tiene un evento llamado rowclick con el cual puedes obtener los valores del registro de la sgte manera:

Código: Seleccionar todo

, listeners: {
            rowclick: function(grid, index){
                var st = grid.getStore();
                record = st.getAt(index);
                console.log(record);
                //aqui puedes usar algo asi como myform.getForm().loadRecord(record);
            }
        }


espero te sirva (^_^)

Le he metido el listener haciendo una llamada a una variable que forma el formulario, del modo:

Código: Seleccionar todo

var valorizacion = new Ext.form.FieldSet({
      id:'especies',
      columnWidth: 0.2,
      labelWidth: 110,
      title: ' ',
      defaultType: 'textfield',
      autoHeight: true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: false,
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items:[{
         defaultType: 'textfield',   
         fieldLabel: 'Alfa-3',
         width:40,
         name: 'Cod'
      },{
         fieldLabel: 'Subject_en',
         width:350,
         name: 'Subject_en'
      }]
   });
var eaea = new Ext.FormPanel({
         id:'eaea',
         frame:true,
         labelAlign:'left',
         items:[valorizacion]
   });
//defino el grid
var pivotGrid = new Ext.grid.PivotGrid({
...
//meto el listener
listeners:{
        rowclick:function(grid, index){
   var st = grid.getStore();
   rec= st.getAt(index);
   console.log(rec);
   ventana.show();
   Ext.getCmp("eaea").getForm().loadRecord(rec);
   }
},
...
var ventana = new Ext.Window({
      id:'ventana',
      title: '',
      width: 600,
      height: 550,
      closeAction:'hide',
      items: eaea,
      plain:true,
      buttons: [{
                 text:'Aceppt',
               handler: function(){
                  ventana.hide();
               }
              }]
      });


Efectivamente me abre la ventana, pero el comportamiento no es el deseado. A ver (si me explico bien), pensaba que del mismo modo que hacia el Count en el grid, a la hora de mostrar el formulario me mostraria los distintos valores para un Cod, en el adjunto se ve la configuracion del pivotGrid, yo queria seleccionar una fila y que mostrara los distintos valores que tiene un codigo en concreto. el json que utilizo tiene la siguiente estructura:

Código: Seleccionar todo

{"rows":[
   {
      "Cod": "119",
      "Food_use": "Non-food aplications",
      "Subject_en": "Medical & pharmaceutical compounds obtention",
      "Subject_es": "Obtención de compuestos médicos y farmacéuticos",
      "Subject_pt": "Obter compostos médicos e farmacéuticos"
   },
   {
      "Cod": "119",
      "Food_use": "Food uses",
      "Subject_en": "Direct consumption",
      "Subject_es": "Consumo directo",
      "Subject_pt": "Consumo direto"
   },
   {
      "Cod": "14",
      "Food_use": "Non-food aplications",
      "Subject_en": "Medical & pharmaceutical compounds obtention",
      "Subject_es": "Obtención de compuestos médicos y farmacéuticos",
      "Subject_pt": "Obter compostos médicos e farmacéuticos"
   },
   {
      "Cod": "14",
      "Food_use": "Food uses",
      "Subject_en": "Direct consumption",
      "Subject_es": "Consumo directo",
      "Subject_pt": "Consumo direto"
   },
   {
      "Cod": "25",
      "Food_use": "Non-food aplications",
      "Subject_en": "Medical & pharmaceutical compounds obtention",
      "Subject_es": "Obtención de compuestos médicos y farmacéuticos",
      "Subject_pt": "Obter compostos médicos e farmacéuticos"
   }
]
}


aunque ocultase el valor del campo Food-use en el formulario, queria poder mostrar a la vez los distintos valores de los otros campos. ¿es posible?, habria otra forma de hacerlo?

no entiendo muy bien lo que quieres pero recuerda que los datos de tu grilla se unirán de manera que un campo pertenece a un control de tu formulario, es decir, el campo llamado cod solo puede contener un valor si haces la carga con loadrecord, si deseas que un campo contenga mas de un valor pues tendrás que hacerlo de otra manera, por ejemplo en vez de usar loadrecord tendrás que asignarle manualmente los valores a cada campo y asi si podrías concatenar los campos.

en todo caso no entiendo muy bien lo que quieres hacer, si puedes explicármelo con mas detalle talvez pueda ayudarte

Como puedes ver en el adjunto, por ejemplo, el codigo 119 tiene dos valores, si pincho en la primera fila me muestra la info en el form, pero si pincho en la segunda fila no me saca el valor del codigo 14 si no que me muestra el siguiente valor del codigo 119, si pincho en del 25 me muestra el valor del 14 y asi sucesivamente y para cada valor de cada codigo. Efectivamente, lo que pretendo hacer es mostrar los distintos valores que tiene cada campo. la idea era poner "atractiva" la salida del grid para poder mostarlo por pantalla, añadiendo mas campos a mostrar. pensaba que podria existir la posibilidad de hacer como un textbox en el que se mostraran todos los valores de un mismo campo. fue lo que se me ocurrio que podria hacer para sacar la info de un fichero json por pantalla.

te los muestra así porque cada "row" de tu json es un registro distinto, lo que se me ocurre es que podrías agregarle un id a cada row para individualizarlos y en el evento rowclick leer ese id para cargar los datos en el form

Finalmente, he decidido hacer un GroupingView, visualmente queda muchisimo mejor, ya que en lugar de ver un grid lleno de ceros y unos, estoy haciendo una agrupacion por nombre y muestro el valor que me interesa en el grid y despues por medio de un form muestro el resto de la informacion. ahora voy a tener el problema de integrarlo con el otro, aqui ahora tengo una duda, ya que lo programe haciendo un render en una pagina aparte y quiero integrarlo en el proyecto. Cuando lo meto en el JS principal al cargar la pagina me da lo de "b is null". en principio son dos grids independientes. estoy ejecutando una consulta en php y cuando obtengo la respuesta del servidor meto la info del json en el grid principal. el Grid.GroupingView es un grid secundario que en principio no tiene nada que ver con el primero, la idea era asociarle un evento a un boton y que me cargue el grid, he observado que si lo meto en el JS principal de la pagina, el servidor ya me devuelve el GET del json que voy a cargar en el segundo grid y eso es una carga un poco absurda, no? deberia de hacer el GET cuando ejecutara el boton y no al arrancar la pagina. como podria llamarlo desde un boton en un panel, por ejemplo, en la pagina principal?
dejo codigo del Grid.GroupingView combinado con formulario para que muestre la info completa de un modo visualmente mas atractivo, por si a alguien le interesa.

Código: Seleccionar todo

Ext.onReady(function() {
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side';
    var SpecieRecord = Ext.data.Record.create([
       {name: 'Spice'},
      {name: 'scientific_name', type:'string'},
                {name: 'a_code', type: 'string'},
      {name: 'spanish_name', type:'string'},
      {name: 'portuguese_name', type:'string'},
               {name: 'Food_use', type: 'string'},
               {name: 'subject_en', type: 'string'},
      {name: 'subject_es', type: 'string'},
      {name: 'subject_pt', type: 'string'}
    ]);
   var storeSpecie = new Ext.data.GroupingStore({
        url: 'data/valor_especie.json',
        autoLoad: true,
        reader: new Ext.data.JsonReader({
            root: 'rows',
            idProperty: 'id'
        }, SpecieRecord),
      sortInfo:{field: 'Spice', direction: "ASC"},
      groupField:'scientific_name'
    });
   var Species = new Ext.form.FieldSet({
      id:'Species',
      columnWidth: 0.2,
      labelWidth: 110,
      title: ' ',
      defaultType: 'textfield',
      autoHeight: true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: false,
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items:[{
         defaultType: 'textfield',   
         fieldLabel: 'Alfa-3',
         width:40,
         name: 'a_code'
      },{
         fieldLabel: 'Scientific Name',
         width:160,
         name: 'scientific_name'
      }]
   });
   var Speciesname = new Ext.form.FieldSet({
      id:'Speciesname',
      columnWidth:0.2,
      labelWidth:110,
      checkboxToggle:true,
      collapsed:false,
      title: 'Other Species Names',
      defaultType: 'textfield',
      autoHeight:true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: true,
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items:[{
         defaultType:'textfield',
         fieldLabel: 'Spanish Name',
         width:160,
         name: 'spanish_name'
      },{
         defaultType: 'textfield',
         fieldLabel: 'Portuguese Name',
         width:160,
         name: 'portuguese_name'
      }]
   });
   var use = new Ext.form.FieldSet({
      id:'formulario2',
      columnWidth: 0.2,
      labelWidth: 110,
      title: ' ',
      defaultType: 'textfield',
      autoHeight: true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: false,
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items:[{
         defaultType: 'textfield',   
         fieldLabel: 'Use',
         width:40,
         name: 'Food_use'
      },{
         fieldLabel: 'Valorization',
         width:160,
         name: 'subject_en'
      }]
   });
   var usevalore = new Ext.form.FieldSet({
      id:'usevalore',
      columnWidth:0.2,
      labelWidth:110,
      checkboxToggle:true,
      collapsed:true,
      title: 'Other Species Valorization',
      defaultType: 'textfield',
      autoHeight:true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: true,
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items:[{
         defaultType:'textfield',
         fieldLabel: 'Spanish Name',
         width:160,
         name: 'subject_es'
      },{
         defaultType: 'textfield',
         fieldLabel: 'Portuguese Name',
         width:160,
         name: 'subject_pt'
      }]
   });
   var valoriza = new Ext.form.FieldSet({
      id:'valiriza',
      columnWidth:0.2,
      labelWidth:140,
      title:'Species Valorization',
      defaultType: 'textfield',
      autoHeight: true,
      bodyStyle: Ext.isIE ? 'padding:0 0 5px 5px;' : 'padding:5px 5px',
      border: 'true',
      style: {
         "margin-left": "10px",
         "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "10px"
      },
      items: [Species, Speciesname, use, usevalore]
   });
   
   var SpecieForm = new Ext.FormPanel({
         id:'SpecieForm',
         frame:true,
         labelAlign:'left',
         items:[valoriza]
   });
   var gridvalor = new Ext.grid.GridPanel({
      store: storeSpecie,
      columns:[{
            id:'Spice',
            header: "Specie Name ",
            width:100,
            hidden:true,
            dataIndex:'scientific_name'
         },{
            header: "Alfa-3",
            width: 50,
            sortable: false,
            align: 'right',
            hidden:true,
            dataIndex: 'a_code'
         },{
            header: "Valorization",
            align: 'right',
            sortable: false,
            width:400,
            dataIndex: 'subject_en'
         }],
         view: new Ext.grid.GroupingView({
            forceFit:false,
            //groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),   
      frame:true,
        width: 450,
        height: 600,
        collapsible: false,
        animCollapse: false,
        title: 'Species Valorization',
        iconCls: 'icon-grid',
      renderTo: 'docbody',
           stripeRows: true,
      singleSelect:true,
      listeners:{
               rowclick:function(grid, index){
               var st = grid.getStore();
               rec= st.getAt(index);
               console.log(rec);
               ventanas.show();
               Ext.getCmp("SpecieForm").getForm().loadRecord(rec);
               }
      },
   });
   var ventanas = new Ext.Window({
      id:'ventanas',
      title: '',
      width: 600,
      height: 500,
      closeAction:'hide',
      items: SpecieForm,
      plain:true,
      buttons: [{
                 text:'Aceppt',
               handler: function(){
                  ventanas.hide();
               }
              }]
      });
});