1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default passing string in "textfield" to another part in code

    passing string in "textfield" to another part in code


    Hello,

    I have one question about passing strings from one Ext.formPanel textfield to another part of the code. The thing is that I have two "textfield" in the formPanel and I want the words I enter there as part of the "url" I have in the code. Probably you may ask, why does this guy want that?? this is because the "url" I'm using has a PHP script that generates features stored in a postgis db table as GeoJSON.

    This the code:

    Code:
    // define the data source
         var protocol = new OpenLayers.Protocol.HTTP({
             url:  "http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters="  + "column" + ilike '%"string"%',
             format: new OpenLayers.Format.GeoJSON({
                 ignoreExtraDims: true,
                 'internalProjection': new OpenLayers.Projection("EPSG:900913"),
                 'externalProjection': new OpenLayers.Projection("EPSG:4326")
             })
         });
     
         formPanel = new GeoExt.form.FormPanel({
             title: "Place Name Search",
             height: 150,
             region: "north",
             protocol: protocol,
             items: [{
                 xtype: "textfield",
                id: "column",
                 emptyText: "Choose table column",
                 fieldLabel: "Choose table column",
                 width: 200,
                 allowBlank: false
             }, {
                 xtype: "textfield",
                id: "string",
                 emptyText: "Search inside table",
                 fieldLabel: "Enter a word to search",
                 width: 200,
                 allowBlank: false
             }],
             listeners: {
                 actioncomplete: function(form, action) {
                     features = action.response.features;
                     store.loadData(features);
                     vm=map.getLayersByName("Results");
                     if(vm.length===0){
                         vecLayer = new OpenLayers.Layer.Vector("Results");
                         map.addLayer(vecLayer);
                         store.bind(vecLayer);
                         select.bind(vecLayer);
                     }
                 }
             },
      buttons: [{text: 'search',
                 handler: function(){
                     formPanel.search();
                 }
             }],
             keys: [{ key: [Ext.EventObject.ENTER],
                 handler: function() {
                     formPanel.search();
                 }
             }]
         });
    These are the cases I already tested:

    1. url: "http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom": this generates the whole table "boreholes_point_wgs84" as GeoJSON.
    2. url: "http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=station ilike '%llena%'": this generates only one feature, the feature that has "llena" in the "station" column. So, in this way I can find the feature through the search form.

    What I was thinking is if I can pass these two strings I enter in "textfield" and modify the "url" in the way that it can catch these two words and form, for example, the second case I put above. I was playing with this:

    url: "http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=" + "column" + ilike '%"string"%',

    so using the "id" I specified below each xtype, but it doesn't work.

    I appreciate any support on this, thanks in advance,

    Best regards,

    Gery

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default


    Try it with "name" instead of "id".


    { xtype: "textfield",
    name: "column", // <--
    emptyText: "Choose table column",
    fieldLabel: "Choose table column",
    width: 200,
    allowBlank: false }
    var a = Ext.getCmp("column").getText();

    and than use "a".. not 100% sure if it works

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    If I correctly understand what you're trying to achieve...

    var col = Ext.getCmp("column").getValue();
    var str = Ext.getCmp("string").getValue();

    Then drop the vars of col and str into your URL:
    url: 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=' + col + ' ilike %' + str + '%'

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    Many thanks jorgeluislay and willigogs, I appreciate your support on this, this is the new code after adding your suggestions:

    Code:
    //    var col = Ext.getCmp("column").getValue();
    //    var str = Ext.getCmp("string").getValue();
    //    var col = Ext.getCmp("formPanel").getForm().findField("column").getValue();
    //    var str = Ext.getCmp("formPanel").getForm().findField("string").getValue();
    
        // define the data source
        var protocol = new OpenLayers.Protocol.HTTP({
            url: 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=' + col + 'ilike %' + str + '%',
            format: new OpenLayers.Format.GeoJSON({
                ignoreExtraDims: true,
                'internalProjection': new OpenLayers.Projection("EPSG:900913"),
                'externalProjection': new OpenLayers.Projection("EPSG:4326")
            })
        });
    
        formPanel = new GeoExt.form.FormPanel({
            title: "Place Name Search",
            id: "formPanel",
            height: 150,
            region: "north",
            protocol: protocol,
            items: [{
                xtype: "textfield",
                id: "column",
                emptyText: "Choose table column",
                fieldLabel: "Choose table column",
                width: 200,
                allowBlank: false
            }, {
                xtype: "textfield",
                id: "string",
                emptyText: "Search inside table",
                fieldLabel: "Enter a word to search",
                width: 200,
                allowBlank: false
            }],
            listeners: {
                actioncomplete: function(form, action) {
                    features = action.response.features;
                    store.loadData(features);
                    vm=map.getLayersByName("Results");
                    if(vm.length===0){
                        vecLayer = new OpenLayers.Layer.Vector("Results");
                        map.addLayer(vecLayer);
                        store.bind(vecLayer);
                        select.bind(vecLayer);
                    }
                }
            },
            buttons: [{text: 'search',
                handler: function(){
                    formPanel.search();
                }
            }],
            keys: [{ key: [Ext.EventObject.ENTER], 
                handler: function() {
                    formPanel.search();
                }
            }]
        });
     
        var col = Ext.getCmp("column").getValue();
        var str = Ext.getCmp("string").getValue();
    //    var col = Ext.getCmp("formPanel").getForm().findField("column").getValue();
    //    var str = Ext.getCmp("formPanel").getForm().findField("string").getValue();
    Interestingly, setting the col and str variables above the variable protocol doesn't allow me to load the whole map, it gives this error:

    Code:
    Ext.getCmp("column") is undefined
    
    
    [IMG]chrome://firebug/content/blank.gif[/IMG] var col = Ext.getCmp("column").getValue();
    so setting those values after the protocol and formPanel variables allows me load the map and everything but gives me this error after putting "type" and "dust" and pressing the search button:

    Code:
    http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=undefinedilike%20%undefined%&column__eq=type&queryable=column,string&string__eq=dust
    (using: http://localhost/postgis_geojson.php...arameters=type ilike '%dust%', I get four features btw.)

    I understand from this that the variables are not being passed into the url, but they should be in this way. If I use Ext.getCmp plus the findField (commented above), I get the same error.

    Where could the problem be? thanks again for the support,

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    You will need to populate the col and str variables at the point where you're building the URL string - not just on page load. You can't use variables in the URL when they haven't been set yet!

    I assume this will be during the click event of a button, or the submit of a form (i.e. once the textfield values have been populated)? You will probably need to overwrite the protocol url value upon this event firing, or alternatively use the provided Ext form submit or Ajax request functions to achieve the same goal (I'm not sure what benefit the OpenLayers.Protocol.HTTP section of your code provides).

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    so I need to set the "col" and "str" variables in the same place the url is located?? how could I do that? I though every variable has to be set outside another variable. In the code, the url is inside the "protocol" variable. Sorry but what does populate mean? I'm not very good at names like that. I think overwriting the default url (ie. deleting the queryable, etc) could work, but passing just the "col" and "str" variables to the url may be easier?? this is the whole code:

    Code:
    Ext.onReady(function() {
        var map = new OpenLayers.Map();
        var osm = new OpenLayers.Layer.OSM(
            "OSM"
        );
        map.addLayer(osm);
    
        var mappanel = new GeoExt.MapPanel({
            region:"center",
            height: 400,
            width: 600,
            map: map,
            title: 'A Simple GeoExt Map'
        });
    
        var layerList = new GeoExt.tree.LayerContainer({
            text: 'All Layers',
            layerStore: mappanel.layers,
            leaf: false,
            expanded: true
        });
    
        var layerTree = new Ext.tree.TreePanel({
            title: 'Map Layers',
            maxWidth: 500,
            region: "east",
            collapsible: true,
            collapsed: true,
            root: layerList
        });
    
        var features = [];
        var vecLayer = new OpenLayers.Layer.Vector("Results");
        var select = new GeoExt.grid.FeatureSelectionModel();
    
    //    var col = Ext.getCmp("column").getValue();
    //    var str = Ext.getCmp("string").getValue();
    //    var col = Ext.getCmp("formPanel").getForm().findField("column").getValue();
    //    var str = Ext.getCmp("formPanel").getForm().findField("string").getValue();
    
        // define the data source
        var protocol = new OpenLayers.Protocol.HTTP({
            url: 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=' + col + 'ilike %' + str + '%',
            format: new OpenLayers.Format.GeoJSON({
                ignoreExtraDims: true,
                'internalProjection': new OpenLayers.Projection("EPSG:900913"),
                'externalProjection': new OpenLayers.Projection("EPSG:4326")
            })
        });
    
        formPanel = new GeoExt.form.FormPanel({
            title: "Place Name Search",
            id: "formPanel",
            height: 150,
            region: "north",
            protocol: protocol,
            items: [{
                xtype: "textfield",
                id: "column",
                emptyText: "Choose table column",
                fieldLabel: "Choose table column",
                width: 200,
                allowBlank: false
            }, {
                xtype: "textfield",
                id: "string",
                emptyText: "Search inside table",
                fieldLabel: "Enter a word to search",
                width: 200,
                allowBlank: false
            }],
            listeners: {
                actioncomplete: function(form, action) {
                    features = action.response.features;
                    store.loadData(features);
                    vm=map.getLayersByName("Results");
                    if(vm.length===0){
                        vecLayer = new OpenLayers.Layer.Vector("Results");
                        map.addLayer(vecLayer);
                        store.bind(vecLayer);
                        select.bind(vecLayer);
                    }
                }
            },
            buttons: [{text: 'search',
                handler: function(){
                    formPanel.search();
                }
            }],
            keys: [{ key: [Ext.EventObject.ENTER], 
                handler: function() {
                    formPanel.search();
                }
            }]
        });
     
    //    var col = Ext.getCmp("column").getValue();
    //    var str = Ext.getCmp("string").getValue();
    //    var col = Ext.getCmp("formPanel").getForm().findField("column").getValue();
    //    var str = Ext.getCmp("formPanel").getForm().findField("string").getValue();
    
        var cols = [ {name: 'station', type: 'string'},
                    {name: 'survey', type: 'string'},
                    {name: 'type', type: 'string'},
                    {name: 'w_depth_m', type: 'float'},
                    {name: 'comments', type: 'string'},
                    {name: 'latitude', type: 'float'},
                    {name: 'longitude', type: 'float'}
                ];
    
        var reader = new GeoExt.data.FeatureReader({},cols);
    
        var store = new GeoExt.data.FeatureStore({
            reader: reader,
            fields: cols,
            autoLoad: false
        });
        // create grid panel configured with feature store
        gridPanel = new Ext.grid.GridPanel({
            title: "Results",
            height: 500,
            region:"center",
            store: store,
            columns: [{
                header: "Station",
                width: 100,
                sortable: true,
                dataIndex: "station"
            }, {
                header: "Survey",
                width: 40,
                sortable: true,
                dataIndex: "survey"
            }, {
                header: "Type",
                width: 40,
                sortable: true,
                dataIndex: "type"
            }, {
                header: "Water depth [m]",
                width: 40,
                sortable: true,
                dataIndex: "w_depth_m"
            }, {
                header: "Comments",
                width: 100,
                align: 'right',
                sortable: true,
                dataIndex: "comments"
        }],
            sm: select
        });
    
        gridPanel.on('rowdblclick', function(g,rowIdx,r){
            rec = store.getAt(rowIdx);
            map.setCenter(
                new OpenLayers.LonLat(
                    rec.get('longitude'),
                    rec.get('latitude')),
                10);
        });
    
        searchPanel = new Ext.Panel({
            layout: "border",
            region: "west",
            collapsible: true,
            width: 400,
            items: [formPanel,gridPanel]
        });
        mainPanel = new Ext.Panel({
            height: 600,
            renderTo: "mainpanel",
            layout: "border",
            items: [searchPanel,mappanel,layerTree]
        });
    
    });
    in this case the OpenLayers.Protocol.HTTP allows talking to the php script that generates the features stored in postgis table in geojson format, and these features are then plotted in the map as vectors and their properties displayed in a ext grid. The problem, as you understood correctly the first time, is that the url is not getting what I enter in the "textfield" and then the url is not contructed in the way it can output only the features are searched. I've read some examples using ajax but seems that is more complex that I'm trying to get here.

    thanks again willigogs

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Hi again Gery,

    Unfortunately I'm not familiar with the geoExt framework, so am unaware of what methods we can use to achieve your goal. Nevertheless, you will need to do something like this:

    Code:
    function updateUrl() {
        var col = Ext.getCmp("column").getValue();
        var str = Ext.getCmp("string").getValue();
        // OVERWRITE THE URL HERE
    }
    Code:
    ...
    buttons: [{
        text: 'search',
        handler: function(){
            updateUrl()
            formPanel.search();
        }
    }],
    keys: [{ 
        key: [Ext.EventObject.ENTER], 
        handler: function() {
            updateUrl()
            formPanel.search();
        }
    }]
    ...
    The only problem is how to overwrite the URL. Using Ext3.x you would do something like this:

    Code:
    store.proxy.setUrl('new url goes here');
    However, I don't expect that will work with the geoExt store you are using, therefore this will require some investigation on your part. I would try something like the following, and see if this updates the URL value:
    Code:
    formpanel.protocol.url = 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom&parameters=' + col + 'ilike %' + str + '%';
    If this doesn't work, this will simply require some debugging on your part from inside the updateUrl() function. Start by console.logging the store and protocol objects, and see if you can successfully get the url value to update. There also must be some geoExt API documentation available somewhere which might be able to point you in the correct direction?

    If none of these work, then possibly consider investigating whether you could achieve the same result with normal ExtJS data stores?

    Edit:
    No idea if this might be of assistance?
    http://api.geoext.org/1.1/examples/search-form.html

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi