Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: How I can open a webpage from one or more rows selected in a gridpanel?

  1. #1
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default How I can open a webpage from one or more rows selected in a gridpanel?

    Hi, I have a grid who is populated with records that come from a filter on a store, every row is linked to specific file who users can open in a new tab (if them chose two or more, all files will open in a same tab).


    I have two buttons: which one is for open every file selected, and the other one is for download every file selected... I will apreciate your help for to make this.

    My dataModel:
    Code:
        Ext.define('MyGrid', {
            extend: 'Ext.data.Model',
            fields: [
                      {name:'Pais', type: 'string'},
                      {name:'DivPola', type: 'string'},
                      {name:'Archivo',  type: 'string'},
                      {name:'Etiqueta',  type: 'string'},
                      {name: 'SelMultiple', type: 'bool'}
    
    
                    ],
        });
    My TreeStore
    Code:
        Ext.define('MyGrid', {
            extend: 'Ext.data.Model',
            fields: [
                      {name:'Pais', type: 'string'},
                      {name:'DivPola', type: 'string'},
                      {name:'Archivo',  type: 'string'},
                      {name:'Etiqueta',  type: 'string'},
                      {name: 'SelMultiple', type: 'bool'}
    
    
                    ],
        });
    ...And one panel
    Code:
        var MyPanel_01 = Ext.create('Ext.panel.Panel', {
    
    
                    itemId: 'PanelEnRegCenter',
                    xtype:'panel',
                    region: 'east',
                    width: '60%',
                    height: '100%',
                    style: 'margin: 2px',
    
    
        }); // Termina el Panel que se desplegará en la sección este del viewPort
    ... One treePanel

    Code:
    var MyTree_01 = Ext.create('Ext.tree.Panel', {
                    title:"Mi Treepanel",
                    itemId: 'My_TreePanel_01',
                    region: 'center',
                    width: '40%',
                    height: '100%',
                    store: store_Tree,
                    style: 'margin: 2px',
                    border:0,
        
                      listeners:{ //Listeners para cada nodo del treePanel
    
    
                        select:function(t,record){
    
    
                                        var a = record.parentNode.raw.name; // capturo el nodo pais
                                        var b = record.raw.name; // capturo el nodo para DivPolAdministrativa
    
    
    
    
                        var store = Ext.create('Ext.data.JsonStore', {
                            model: 'MyGrid',
                            proxy: {
                                type: 'ajax',
                                url: 'SeleccionDeArchivos_Json.php',
                                reader: {
                                    type: 'json',
                                    root: 'MigrInt'
                                },
    
    
                            },
    
    
                            autoLoad: true,
                        });
              
                console.log(store)
    
    
    
    
            store.on('load',function(){
                store.filterBy(function(record,id){
                return record.get('Pais')== a && record.get('DivPola') == b;
                });
    
    
            });
    
            var sm = Ext.create('Ext.selection.CheckboxModel');
    
    
            var grid = Ext.create('Ext.grid.Panel', {
                    store: store,
                    height: '100%',
                    columnLines: true,
                    border:0,
                    loadMask: true,
                    selModel:sm,
                    multiSelect: true,
                    columns:[
    
    
                    {
                        text: "Archivos",
                        dataIndex: 'Etiqueta',
                        flex: 1,
                         renderer: renderTopic, // función que me permite asignar un link para descarga del(los) archivo(s)
                        sortable: true,
                                                        
                    },
    
    
                    ],        
    
    
        listeners: {
    
    
                'cellselect': function(selModel, rowIndex) {
                    var cellRow = grid.getView().getRow(rowIndex);
                    Ext.fly(cellRow).addCls('custom-grid')
    
    
        }
    
    
    },                                                    
    
    
    
    
        }); // Termina la configuración del grid
    
    
                MyPanel_01.items.each(function(c){c.close();});
    
    
                MyPanel_01.add(grid);
    
    
    }
            }, // Termina la función Select del listeners
    
    
                    }); // Termina la configuración de MyTree_01
    ... Una función

    Code:
    function renderTopic(value, p, record) {
            return Ext.String.format(
            '<a href="http://localhost/curso-extjs4/grid/WebIndig_ESP/MIGR_Int/' + record.data.Archivo + '?t={2}" target="_blank">{0}</a>', // esto lo cambiaré después
            value,
            record.data.Etiqueta,
            record.getId(),
            record.data.Pais
            );
    
    
        }
    El contenedor y botones
    Code:
        var win = Ext.create('Ext.container.Viewport', {
        layout: 'border',
        defaults:{
           columnWidth:0.5,
           layout:'anchor',
           border: 0
        },
    
    
                items: [{
                    region: 'north',
                    height: '24%',
                    layout:'fit',
                   border: 0,
                    html: '<iframe style="height: 100%; width: 100%; border: 0" frameborder="0" src="BcoDatosIndig_ESP.htm"></iframe>'
    
    
    
    
                },{
                    region: 'south',
                    height: '38%',
                   border:0
                                                
                    
                },{
                    region: 'west',
                    width: '30%',
                    layout: 'fit'
                },{
                    region: 'east',
                    width: '17%',
                    layout: 'fit'
    
    
                },{
                    title: 'Migración interna de pueblos indígenas',
                    itemID: 'CenterCnt',
                    region: 'center',
                    width: 600,
                    height: 200,
                    border:1,
                    layout: 'hbox',
    
    
                            items:[MyTree_01,MyPanel_01], // Cierra Items para Región Center
    
    
                    buttons:[
    
    
                            {
                                text:'Abrir',
                            handler: function() {
    
    
                                /*Boton para abrir el/los archivos seleccionados*/
                                var PP="I_Don't Know What To Do Here";
    
    
                                }
                            },
    
    
                            {
                                  text:'Descargar',
                                handler:function(){
    
    
                        /*Boton para descargar el/los archivos seleccionados*/
                                    
                                var    PP="I_Don't Know What To Do Here";
                                
                                }
                            }
    
    
                        ],
            
                    }
    
    
                ] // Cierra los Items del ViewPort
    
    
            }); // Cierra la variable border que será el contenedor de todo

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Are you talking about opening web pages or files and if files, what kind of file? You might try posting a working example of what you have so far making it easier for folks to build on what you have.

  3. #3
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default

    It's about excel files that were converted to html format and located on the local server, each row is linked to a file

    MyApp.jpg

  4. #4
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    252

    Default

    On pressing the button you can iterate the selected records in the store connected with the grid. And for every link open a new tab in the browser.

    Iterate the store:
    Code:
    var grid = this.down('#yourgrid'); // with itemId: 'yourgrid'
    var sm = grid.getSelectionModel(); // selection model
    var selected = sm.getSelection();  // only the checked records
    
    Ext.each(selected, function(item) {
        var url = item.get('url');
        window.open(url, '_blank');
    }, this);


  5. #5
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default

    thank's, thank you very much jvandemerwe, after my work (to day) I will go review your code in my app and I tell you how will work.

  6. #6
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default Sorry, but I did not know how or where to add code...

    In many attempts I did I got the error "Uncaught TypeError: this.down is not a function". Neither knew where to add the "itemId 'yourgrid'" line. I'll keep trying, but if you help me a little more, the better.


    Thank you.

  7. #7
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    252

    Default A working model in Sencha Fiddle

    https://fiddle.sencha.com/#fiddle/o1l

    B
    ut you have to remember that when you do this for the first time your browser might only open one tab. The browser might prevent opening more than one tab. (Google Chrome). See the box with the red 'x' in your URL locator and press this. Allow then to always allow popups from the URL where the application is running.

    SH_014452.jpg


    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
    
    
            Ext.create('Ext.panel.Panel', {
                renderTo: Ext.getBody(),
                width: 500,
                heigth: 500,
                title: 'Url Demo',
                items: [{
                    xtype: 'UrlGrid'
                }]
            });
        }
    });
    Code:
    Ext.define('UrlGrid', {
       extend: 'Ext.grid.Panel',
        itemId: 'urlgrid',
       alias: 'widget.UrlGrid',
       layout: 'fit',
    
       initComponent: function () {
          var me = this;
    
          var store = Ext.create('Ext.data.Store', {
             fields: ['url'],
             data: [{
                url: 'http://www.enovision.net',
                 name: 'enovision'
             }, {
                url: 'http://www.google.com',
                 name: 'google'
             }, {
                url: 'http://www.sencha.com',
                 name: 'sencha'
             }, {
                url: 'http://www.microsoft.com',
                 name: 'microsoft'
             }]
          });
    
          Ext.applyIf(me, {
             store: store,
             columns: [{
                text: 'URL',
                dataIndex: 'url',
                flex: 1
             }],
             selModel: {
                selType: 'checkboxmodel'
             },
             dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                   xtype: 'button',
                   text: 'Open URL',
                   scope: me,  // scope on this object: grid
                   handler: function () {
                      me.fireEvent('ButtonClicked', me); // pass the grid with the event fired
                   }
                }]
             }]
          });
    
          me.callParent(arguments);
    
          me.on('ButtonClicked', function (grid) {
             
             var sm = grid.getSelectionModel(); 
             var selected = sm.getSelection();  
      
              Ext.each(selected, function(item) {
                   var url = item.get('url');
                   window.open(url, item.get('name'));
              }, this);
          }, me);
       }
    });

  8. #8
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default

    okay, thanks for your help jvandemerwe. I'll work on it over the weekend and then tell you how I'm gone.

  9. #9
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    252

    Default

    Quote Originally Posted by sesebas View Post
    okay, thanks for your help jvandemerwe. I'll work on it over the weekend and then tell you how I'm gone.
    Don't worry it will work. Just look carefully add the grid in the Fiddle, that contains all the tricks.

  10. #10
    Sencha User
    Join Date
    Aug 2013
    Posts
    20

    Default

    Hi,
    Finally I could work and adapt this code (https://fiddle.sencha.com/#fiddle/o1l) for my project, but I need you if you have selected more than one link, each open after the other, in one page html.


    This is my code so far:

    Code:
          me.callParent(arguments);
    
    
          me.on('ButtonClicked', function (grid) {
             
    		  var sm = grid.getSelectionModel(); 
    		  var selected = sm.getSelection();
    
    
          var xx = sm.getCount(); // Devuelve el número de filas seleccionadas
          
          for (i = 0; i < xx; i++) {
    
    
                var itm = sm.selected.items[i];
    
    
                console.log(itm, "i vale: ", i); // para debug
    
    
                    if (i < 1){
                        Ext.each(selected, function(item) {
                         var url = sm.selected.items[i].raw.Archivo;
                         window.open(url);
                        }, this);
    
    
                      } else if (i >= 1 ) {
    
    
                        Ext.each(selected, function(item) {
                         var url = sm.selected.items[i].raw.Archivo;
                         //var url = item.get('Archivo');
                         window.open(url);
                        }, this);
    
    
                      } else {
    
    
                        Ext.Msg.alert('Error','Debe seleccionar al menos un archivo');
                      }
    
    
                      
            }
    
          }, me);
    Imagen:

    HastaAhora.JPG

Page 1 of 2 12 LastLast

Similar Threads

  1. Keep rows selected in GridPanel
    By payo22 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 8 Mar 2013, 7:40 AM
  2. Gridpanel rows getting selected via keyboard in Firefox.
    By Addil in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Feb 2011, 3:48 AM
  3. [3.0.0] GridPanel - new rows stay permanently selected
    By stachobywatelpl in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 26 Feb 2010, 12:54 AM
  4. [ HELP ! ] GridPanel -> How to get selected rows ids
    By merianos in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 Dec 2009, 3:59 AM
  5. GridPanel, how to know what rows have been selected?
    By jimtyp in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 25 Aug 2009, 12:45 PM

Tags for this Thread

Posting Permissions

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