We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered ExtJS question/problem

    • 17403 ☆ A M B ☆
    • 183 Posts
    lokamaya Reply #11, 13 years, 9 months ago
    I can't see the generated html code there. Using WebDeveloper addon for Firefox we can see it, and the output is different compared to "view source".

    Example: I have mygallery TV with id=22. Then I can locate it by searching "tv22", so I can see what happen there in the code (see the image)
      zaenal.lokamaya
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #12, 13 years, 9 months ago
      The "view source" is the HTML source on page load. Anything added or modified by Javascript won't exist in the original page source. That's why Firebug or something similar is necessary to see what the Javascript is doing.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 37110
        • 72 Posts
        wiegers Reply #13, 13 years, 9 months ago
        The attachment "column.png" is a column layout. The div#ext-gen7 has a width of 100%;
        The attachment "xtype-container-layout-column.png" has an xtype "container" and a column layout. The div#ext-comp-1006 has a width of 100%;
        The attachment "added-parent.png" has another parent and inside a panel with a column layout. The div#ext-gen10 has a width of 100%;

        I also added the package inside the attachments so you can see it for yourself.

        I hope you can figure it out.
          • 17403 ☆ A M B ☆
          • 183 Posts
          lokamaya Reply #14, 13 years, 9 months ago
          I make a snapshot with colored border + padding 10px.


          • red border: outer panel
          • blue border: second panel
          • green border: third panel (columns)

          Sorry, I miss what actually you want to achieve smiley

          Do you want a fix width layout or flowing layout?
            zaenal.lokamaya
            • 37110
            • 72 Posts
            wiegers Reply #15, 13 years, 9 months ago
            I want to be the both green panels be 50% width. So the outer panel a 100% width.
            I have now set a width of 600px because i cant figure out how i can accomplish that.
            [ed. note: wiegers last edited this post 13 years, 9 months ago.]
              • 17403 ☆ A M B ☆
              • 183 Posts
              lokamaya Reply #16, 13 years, 9 months ago
              Hi wiegers,

              Here the modified files: mgr.css, mapstv.js and mapstv.input.tpl. I change all xtype panel to container, and add cls to the elements.

              Use mgr.css to change the layout. I add some comments as possible.
                zaenal.lokamaya
                • 17403 ☆ A M B ☆
                • 183 Posts
                lokamaya Reply #17, 13 years, 9 months ago
                The generated html code look like this

                <!--// renderTo element //-->
<div class="mapstv-outer-div">
  <!--// mapstv-panel: main mapstv div //-->
  <div class=" mapstv-panel">
    <!--// mapstv-column-container //-->
    <div class=" mapstv-column-container x-column-layout-ct">
      <div class="x-column-inner">
        <!--// mapstv-column column:left //-->
        <div class=" mapstv-column mapstv-column-left x-form-label-top x-column">
          <div class="x-form-item ">
            <label class="x-form-item-label">Street</label>
            <div class="x-form-element">
              <input type="text" name="street" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
          <div class="x-form-item ">
            <label class="x-form-item-label">Zipcode</label>
            <div class="x-form-element">
              <input type="text" name="zipcode" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
          <div class="x-form-item ">
            <label class="x-form-item-label">State</label>
            <div class="x-form-element">
              <input type="text" name="state" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
        </div>
        <!--// mapstv-column column:right //-->
        <div class=" mapstv-column mapstv-column-right x-form-label-top x-column">
          <div class="x-form-item ">
            <label class="x-form-item-label">Housenumber</label>
            <div class="x-form-element">
              <input type="text" name="housenumber" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
          <div class="x-form-item ">
            <label class="x-form-item-label">City</label>
            <div class="x-form-element">
              <input type="text" name="city" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
          <div class="x-form-item ">
            <label class="x-form-item-label">Country</label>
            <div class="x-form-element">
              <input type="text" name="country" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
        </div>
        <div class="x-clear"/></div>
      </div>
    </div>
    <!--// button //-->
    <table cellspacing="0" class="x-btn mapstv-button x-btn-noicon">
      <tbody class="x-btn-small x-btn-icon-small-left">
        <tr>
          <td class="x-btn-tl"><i> </i></td>
          <td class="x-btn-tc"/></td>
          <td class="x-btn-tr"><i> </i></td>
        </tr>
        <tr>
          <td class="x-btn-ml"><i> </i></td>
          <td class="x-btn-mc"><em unselectable="on" class="">
            <button type="button" class=" x-btn-text">Generate latitude & longitude and set te marker on the map</button>
          </em></td>
          <td class="x-btn-mr"><i> </i></td>
        </tr>
        <tr>
          <td class="x-btn-bl"><i> </i></td>
          <td class="x-btn-bc"/></td>
          <td class="x-btn-br"><i> </i></td>
        </tr>
      </tbody>
    </table>
    <!--// gmap panel //-->
    <div class=" x-panel mapstv-gmap x-panel-noborder">
      <div class="x-panel-bwrap">
        <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"/></div>
      </div>
    </div>
    <!--// mapstv-column-container //-->
    <div class=" mapstv-column-container x-column-layout-ct">
      <div class="x-column-inner">
        <!--// mapstv-column column:left //-->
        <div class=" mapstv-column mapstv-column-left x-form-label-top x-column">
          <div class="x-form-item ">
            <label class="x-form-item-label">Latitude</label>
            <div class="x-form-element">
              <input type="text" name="latitude" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
        </div>
        <!--// mapstv-column column:right //-->
        <div class=" mapstv-column mapstv-column-right x-form-label-top x-column">
          <div class="x-form-item ">
            <label class="x-form-item-label">Longitude</label>
            <div class="x-form-element">
              <input type="text" name="longitude" msgtarget="under" autocomplete="on" size="20" class="x-form-text x-form-field"/>
            </div>
            <div class="x-form-clear-left"/></div>
          </div>
        </div>
        <div class="x-clear"/></div>
      </div>
    </div>
  </div>
</div>
                  zaenal.lokamaya
                  • 37110
                  • 72 Posts
                  wiegers Reply #18, 13 years, 9 months ago
                  Hi Lokamaya,

                  It's not the finest solution. I know it is possible with just ExtJS.
                  Your fix is overwriting the CSS that ExtJS made.

                  I really appreciate your effort but do you know the ExtJS fix for my problem?

                  Thanks in advance.
                    • 17403 ☆ A M B ☆
                    • 183 Posts
                    lokamaya Reply #19, 13 years, 9 months ago
                    I guess the problem arise because the column layout lies inside collapsed tab.

                    Column layout used fixed width to render its children, not percentage. But fail to get the exact width of parents container because TV tabs in collapse state.

                    Try this code to see the width of all parents of mapstv, all below 200px until reach "x-tab-panel-body".

                    mapsTv.panel = function(config) {
	config = config || {};

	//testing code to see the width of parents container
	var par = Ext.get(config.renderTo);
	var parentWidth = par.getWidth();
	alert('ID:'+par.dom.id + ' || CLS:'+par.dom.className +' || WIDHT:'+ parentWidth);
	while (parentWidth < 300) {
	    par = par.parent();
	    parentWidth = par.getWidth();
	    alert('ID:'+par.dom.id + ' || CLS:'+par.dom.className +' || WIDHT:'+ parentWidth);
	}
	//end of testing code
//...
}
                    [ed. note: lokamaya last edited this post 13 years, 9 months ago.]
                      zaenal.lokamaya
                      • 17403 ☆ A M B ☆
                      • 183 Posts
                      lokamaya Reply #20, 13 years, 9 months ago
                      Try this one. I change the layout:"column" to layout:"anchor". See http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.AnchorLayout

                      Little verbose but really works. And no need to use css anymore.

                      if (typeof google === 'undefined') {
    document.write('<script src="http://maps.google.com/maps/api/js?sensor=false"><\/script>');
}

mapsTv = {};

mapsTv.panel = function(config) {
    config = config || {};
    
    Ext.apply(config,{
        border:false
        ,width: '100%'
        ,listeners: {}
        ,items:[{ 
            xtype: 'container'
            ,border: false
            ,layout: 'anchor'
            ,width:'98%'
            ,anchorSize: {width:'98%', height:'auto'}
            ,items: [{ 
                xtype: 'container'
                ,border: false
                ,layout: 'form'
                ,labelAlign: 'top'
                ,labelSeparator: ''
                ,width: '48%'
                ,anchor: 'left auto'
                ,style: 'float:left;'
                ,items: [{ 
                    xtype: 'textfield'
                    ,name: 'street'
                    ,id: 'mapstv'+config.tvId+'-street'
                    ,fieldLabel: _('mapstv.street')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.street
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.street = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                },{
                    xtype: 'textfield'
                    ,name: 'zipcode'
                    ,id: 'mapstv'+config.tvId+'-zipcode'
                    ,fieldLabel: _('mapstv.zipcode')
                    ,maxLength: 25
                    ,width:'99%'
                    ,value: config.record.zipcode
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.zipcode = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                },{
                    xtype: 'textfield'
                    ,name: 'state'
                    ,id: 'mapstv'+config.tvId+'-state'
                    ,fieldLabel: _('mapstv.state')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.state
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.state = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                }] 
            },{ 
                xtype: 'container'
                ,border: false
                ,layout: 'form'
                ,labelAlign: 'top'
                ,labelSeparator: ''
                ,width: '48%'
                ,anchor: 'right auto'
                ,style: 'float:right; '
                ,items: [{
                    xtype: 'textfield'
                    ,name: 'housenumber'
                    ,id: 'mapstv'+config.tvId+'-housenumber'
                    ,fieldLabel: _('mapstv.housenumber')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.housenumber
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.housenumber = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                },{
                    xtype: 'textfield'
                    ,name: 'city'
                    ,id: 'mapstv'+config.tvId+'-city'
                    ,fieldLabel: _('mapstv.city')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.city
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.city = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                },{
                    xtype: 'textfield'
                    ,name: 'country'
                    ,id: 'mapstv'+config.tvId+'-country'
                    ,fieldLabel: _('mapstv.country')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.country
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.country = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                }] 
            }] 
        },{
            xtype: 'container'
            ,style: 'clear:both;'
        },{
            xtype: 'button'
            ,text: _('mapstv.generate')
            ,style: 'margin: 10px 0'
            ,tv: config.tvId
            ,handler: this.generate
            ,width:'100%'
        },{
            xtype: 'gmappanel'
            ,id: 'tv'+config.tvId+'-gmappanel'
            ,height: 250
            ,anchor:'100%'
            ,width:'100%'
            ,gmapType: 'map'
            ,zoomLevel: 14
            ,mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom']
            ,mapControls: ['GSmallMapControl','GMapTypeControl']               
            ,bodyStyle: 'padding: 5px;'
            ,listeners: {
                beforeRender: function(){
                    //Check if laltude and lonitude are set
                    if(config.record.latitude != 0 && config.record.longitude != 0){
                        //Add marker with latitude and longitude
                        var point = new google.maps.LatLng(config.record.latitude, config.record.longitude);
                        this.setCenter = {
                            lat: config.record.latitude
                            ,lng: config.record.longitude
                            ,marker: {
                                title: config.record.street +' '+ config.record.housenumber
                                ,draggable: true
                            }                
                            ,listeners:{
                                drag: function(e){
                                    var LatLng = e.latLng;
                                    Ext.getCmp('mapstv'+config.tvId+'-latitude').setValue(LatLng.$a);
                                    Ext.getCmp('mapstv'+config.tvId+'-longitude').setValue(LatLng.ab);
                                    Ext.getCmp('mapstv'+config.tvId+'-latitude').fireEvent('change');
                                    Ext.getCmp('mapstv'+config.tvId+'-longitude').fireEvent('change');        
                                }
                            }        
                        };
                    }else{
                        //Check if address is set
                        if(config.record.street && config.record.housenumber && config.record.zipcode && config.record.city && config.record.state && config.record.country){
                        //Add marker with address
                            this.setCenter = {
                                geoCodeAddr: config.record.street +' '+ config.record.housenumber +' '+ config.record.zipcode +' '+ config.record.city +' '+ config.record.state +' '+ config.record.country
                                ,marker: {
                                    title: config.record.street +' '+ config.record.housenumber
                                    ,draggable: true
                                }    
                                ,listeners:{
                                    drag: function(e){
                                        var LatLng = e.latLng;
                                        Ext.getCmp('mapstv'+config.tvId+'-latitude').setValue(LatLng.$a);
                                        Ext.getCmp('mapstv'+config.tvId+'-longitude').setValue(LatLng.ab);
                                        Ext.getCmp('mapstv'+config.tvId+'-latitude').fireEvent('change');
                                        Ext.getCmp('mapstv'+config.tvId+'-longitude').fireEvent('change');                                                
                                    }
                                }    
                            };
                        }else{
                            //Nothing isset hide Google Map, latitude and longitude

                        }
                    }
                }
            }
        },{
            xtype: 'container'
            ,border: false
            ,layout: 'anchor'
            ,width:'98%'
            ,anchorSize: {width:'98%', height:'auto'}
            ,items: [{
                xtype: 'container'
                ,border: false
                ,layout: 'form'
                ,labelAlign: 'top'
                ,labelSeparator: ''
                ,width: '48%'
                ,anchor: 'left auto'
                ,style: 'float:left;'
                ,items: [{
                    xtype: 'textfield'
                    ,name: 'latitude'
                    ,id: 'mapstv'+config.tvId+'-latitude'
                    ,fieldLabel: _('mapstv.latitude')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.latitude
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.latitude = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                }]
               },{
                xtype: 'container'
                ,border: false
                ,layout: 'form'
                ,labelAlign: 'top'
                ,labelSeparator: ''
                ,width: '48%'
                ,anchor: 'right auto'
                ,style: 'float:right;'
                ,items: [{
                    xtype: 'textfield'
                    ,name: 'longitude'
                    ,id: 'mapstv'+config.tvId+'-longitude'
                    ,fieldLabel: _('mapstv.longitude')
                    ,maxLength: 255
                    ,width:'99%'
                    ,value: config.record.longitude
                    ,listeners: { 
                        'change': function(){
                            MODx.fireResourceFormChange();
                            config.record.longitude = this.getValue();
                            Ext.get('tv'+config.tvId).dom.value = JSON.stringify(config.record);
                        }
                    }
                }]
               }]
        },{
            xtype: 'container'
            ,style: 'clear:both;'

        }] 
    });
    mapsTv.panel.superclass.constructor.call(this,config);
};

//Ext.extend(mapsTv.panel,MODx.Panel,{
Ext.extend(mapsTv.panel,Ext.Container,{
    generate: function(){
        var tvId = this.ownerCt.tvId
        var address = Ext.getCmp('mapstv'+tvId+'-street').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-housenumber').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-zipcode').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-city').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-state').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-country').getValue();

        Ext.getCmp('tv'+tvId+'-gmappanel').geoCodeLookup(address, {title: Ext.getCmp('mapstv'+tvId+'-street').getValue() +' '+ Ext.getCmp('mapstv'+tvId+'-housenumber').getValue(), draggable: true}, true, true, {
            drag: function(e){
                var LatLng = e.latLng;
                Ext.getCmp('mapstv'+tvId+'-latitude').setValue(LatLng.$a);
                Ext.getCmp('mapstv'+tvId+'-longitude').setValue(LatLng.ab);
                Ext.getCmp('mapstv'+tvId+'-latitude').fireEvent('change');
                Ext.getCmp('mapstv'+tvId+'-longitude').fireEvent('change');            
            }
        });
    }
});
Ext.reg('mapstv-panel',mapsTv.panel);
                        zaenal.lokamaya