gistfile1.js

  var selProductsGroupingView = new Ext.grid.GroupingView({
    forceFit: true
  });

  var selProductsToolbar = new Ext.Toolbar();

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

  var selProductsGroupingStore = new Ext.data.GroupingStore({
    reader: new Ext.data.JsonReader({
      fields: [{
        name: "products.custom_id",
        mapping: "products_custom_id"
     },{
        name: "products.name",
        mapping: "products_name"
     },{
        name: "products.code",
        mapping: "products_code"
     },{
        name: "suppliers.name",
        mapping: "suppliers_name"
     },{
        name: "products.images_count",
        mapping: "products_images_count"
     },{
        name: "products.files_count",
        mapping: "products_files_count"
     },{
        name: "products.quantity",
        mapping: "products_quantity"
     }],
      root: "results",
      totalProperty: "count",
      id: "id"
    }),
    proxy: new Ext.data.HttpProxy({
      url: "/backend/products/correlations/8742.json"
    }),
    remoteSort: true,
    remove_listener: "load",
    baseParams: {"correlated": 1}
  });

  selProductsGroupingStore.on("beforeload", function() { 
    selProducts.el.mask("Caricamento correlazioni");
  });

  selProductsGroupingStore.on("load", function() { 
    selProducts.el.unmask();
  });

  var selProductsColumnModel = new Ext.grid.ColumnModel({
    columns: [selProductsCheckboxSelectionModel,{
      header: "Codice Custom",
      sortable: true,
      dataIndex: "products.custom_id",
      name: "product[custom_id]"
    },{
      header: "Nome",
      sortable: true,
      dataIndex: "products.name",
      name: "product[name]"
    },{
      header: "Codice",
      sortable: true,
      dataIndex: "products.code",
      name: "product[code]"
    },{
      header: "Fornitore",
      dataIndex: "suppliers.name",
      sortable: true,
      name: "product[warehouse.supplier.name]"
    },{
      align: "center",
      header: "Immagini",
      sortable: true,
      dataIndex: "products.images_count",
      name: "product[images_count]"
    },{
      align: "center",
      header: "Files count",
      sortable: true,
      dataIndex: "products.files_count",
      name: "product[files_count]"
    },{
      align: "center",
      header: "Quantit\u00e0",
      sortable: true,
      dataIndex: "products.quantity",
      name: "product[quantity]"
    }]
  });

  var selProductsPagingToolbar = new Ext.PagingToolbar({
    store: selProductsGroupingStore,
    pageSize: 50,
    displayInfo: true
  });

  var selProducts = new Ext.grid.GridPanel({
    split: true,
    cm: selProductsColumnModel,
    tbar: selProductsToolbar,
    height: 150,
    plugins: [new Ext.grid.Search()],
    border: false,
    sm: selProductsCheckboxSelectionModel,
    store: selProductsGroupingStore,
    bodyBorder: false,
    region: "north",
    view: selProductsGroupingView,
    remove_listener: "afterrender",
    viewConfig: {"forceFit": true},
    layout: "fit",
    stateful: false,
    bbar: selProductsPagingToolbar
  });

  selProducts.on("afterrender", function() { 
    selProductsGroupingStore.load();
  });
  var allProductsGroupingView = new Ext.grid.GroupingView({
    forceFit: true
  });

  var allProductsToolbar = new Ext.Toolbar({
    buttons: [{
      tooltip: "Aggiunge un singolo prodotto",
      handler: up,
      cls: "x-btn-text-icon up"
    },{
      tooltip: "Rimuove un singolo prodotto",
      handler: down,
      cls: "x-btn-text-icon down"
    },{
      tooltip: "Aggiunge tutti i prodotti",
      handler: join,
      cls: "x-btn-text-icon join"
    },{
      tooltip: "Rimuove tutti i prodotti",
      handler: divide,
      cls: "x-btn-text-icon divide"
    }]
  });

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

  var allProductsGroupingStore = new Ext.data.GroupingStore({
    reader: new Ext.data.JsonReader({
      fields: [{
        name: "products.custom_id",
        mapping: "products_custom_id"
     },{
        name: "products.name",
        mapping: "products_name"
     },{
        name: "products.code",
        mapping: "products_code"
     },{
        name: "suppliers.name",
        mapping: "suppliers_name"
     },{
        name: "products.images_count",
        mapping: "products_images_count"
     },{
        name: "products.files_count",
        mapping: "products_files_count"
     },{
        name: "products.quantity",
        mapping: "products_quantity"
     }],
      root: "results",
      totalProperty: "count",
      id: "id"
    }),
    proxy: new Ext.data.HttpProxy({
      url: "/backend/products/correlations/8742.json"
    }),
    remoteSort: true,
    remove_listener: "load",
    baseParams: {"correlated": 0}
  });

  allProductsGroupingStore.on("beforeload", function() { 
    allProducts.el.mask("Caricamento prodotti");
  });

  allProductsGroupingStore.on("load", function() { 
    allProducts.el.unmask();
  });

  var allProductsColumnModel = new Ext.grid.ColumnModel({
    columns: [allProductsCheckboxSelectionModel,{
      header: "Codice Custom",
      sortable: true,
      dataIndex: "products.custom_id",
      name: "product[custom_id]"
    },{
      header: "Nome",
      sortable: true,
      dataIndex: "products.name",
      name: "product[name]"
    },{
      header: "Codice",
      sortable: true,
      dataIndex: "products.code",
      name: "product[code]"
    },{
      header: "Fornitore",
      dataIndex: "suppliers.name",
      sortable: true,
      name: "product[warehouse.supplier.name]"
    },{
      align: "center",
      header: "Immagini",
      sortable: true,
      dataIndex: "products.images_count",
      name: "product[images_count]"
    },{
      align: "center",
      header: "Files count",
      sortable: true,
      dataIndex: "products.files_count",
      name: "product[files_count]"
    },{
      align: "center",
      header: "Quantit\u00e0",
      sortable: true,
      dataIndex: "products.quantity",
      name: "product[quantity]"
    }]
  });

  var allProductsPagingToolbar = new Ext.PagingToolbar({
    store: allProductsGroupingStore,
    pageSize: 50,
    displayInfo: true
  });

  var allProducts = new Ext.grid.GridPanel({
    split: true,
    cm: allProductsColumnModel,
    tbar: allProductsToolbar,
    height: 150,
    plugins: [new Ext.grid.Search()],
    border: false,
    sm: allProductsCheckboxSelectionModel,
    store: allProductsGroupingStore,
    bodyBorder: false,
    region: "center",
    view: allProductsGroupingView,
    remove_listener: "afterrender",
    viewConfig: {"forceFit": true},
    layout: "fit",
    stateful: false,
    bbar: allProductsPagingToolbar
  });

  allProducts.on("afterrender", function() { 
    allProductsGroupingStore.load();
  });
  function up(){
    Backend.app.mask('Salvataggio correlazioni in corso');
    allProductsCheckboxSelectionModel.getSelections().each(function(r){
      Ext.Ajax.request({
        url: '/backend/products/correlate/8742.json',
        method: 'POST',
        params: { add:r.id },
        success: function(result, request){
          Backend.app.unmask();
          var resp = Ext.decode(result.responseText); 
          if (resp.success == true){
            selProductsGroupingStore.add(r);
            allProductsGroupingStore.remove(r);
          } else { 
            Ext.MessageBox.alert(Backend.locale.alert.title, resp.msg);
          }
        }
      })
    })
  }

  function join(){
    Backend.app.mask('Salvataggio correlazioni in corso');
    Ext.Ajax.request({
      url: '/backend/products/correlate/8742.json',
      method: 'POST',
      params: { add_all:1 },
      success: function(result, request){
        Backend.app.unmask();
        var resp = Ext.decode(result.responseText); 
        if (resp.success == true){
          selProductsGroupingStore.reload();
          allProductsGroupingStore.reload();
        } else { 
          Ext.MessageBox.alert(Backend.locale.alert.title, resp.msg);
        }
      }
    })
  }

  function down(){
    Backend.app.mask('Salvataggio correlazioni in corso');
    allProductsCheckboxSelectionModel.getSelections().each(function(r){
      Ext.Ajax.request({
        url: '/backend/products/correlate/8742.json',
        method: 'POST',
        params: { del:r.id },
        success: function(result, request){
          Backend.app.unmask();
          var resp = Ext.decode(result.responseText); 
          if (resp.success == true){
            selProductsGroupingStore.remove(r);
            allProductsGroupingStore.add(r);
          } else { 
            Ext.MessageBox.alert(Backend.locale.alert.title, resp.msg);
          }
        }
      })
    })
  }

  function divide(){
    Backend.app.mask('Salvataggio correlazioni in corso');
    Ext.Ajax.request({
      url: '/backend/products/correlate/8742.json',
      method: 'POST',
      params: { del_all:1 },
      success: function(result, request){
        Backend.app.unmask();
        var resp = Ext.decode(result.responseText); 
        if (resp.success == true){
          selProductsGroupingStore.reload();
          allProductsGroupingStore.reload();
        } else { 
          Ext.MessageBox.alert(Backend.locale.alert.title, resp.msg);
        }
      }
    })
  }

  var tab = Backend.app.tabPanel.add({
    id: 'correlazioni',
    title: 'Correlazioni',
    layout: 'border',
    autoScroll: false, // Fix for Safari
    items: [selProducts, allProducts]
  });