1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    47
    Vote Rating
    1
    Maharshi is on a distinguished road

      1  

    Default Adding separator in between formpanel fields

    Adding separator in between formpanel fields


    Hi,
    I want to add a horizontal line between fields in a formpanel.something similar to a menu separator.
    I dont want a fieldset which makes a border around the field.i tried using a '-' in the items config.its giving errors.

    for ex:

    Company Name : <Ext TextField>
    ---------------------------------------------- line separator
    Company Address : <TextField>
    ----------------------------------------------

    Hope u got the point.please help
    thanks.

  2. #2
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      1  

    Default


    This is an idea.
    1pxLine.gif is a 1x1 pixel image.
    Code:
    Ext.BLANK_IMAGE_URL = '/js/ext/resources/images/default/s.gif';
    Ext.onReady(function () {
    
    	var lineconfig = {
    		xtype: 'box',
    		autoEl:{
    			tag: 'div',
    			style:'line-height:1px; font-size: 1px;margin-bottom:4px',
    			children: [{
    				tag: 'img',
    				src: '1pxLine.gif',
    				height: '2px',
    				width: '100%'
    			}]
    		}
    	};
    	
    	var formp = new Ext.FormPanel({
    		title: 'Example form',
    		renderTo: Ext.getBody(),
    		width: 500,
    		defaults: {
    			xtype: 'textfield'
    		},
    		items: [{
    			fieldLabel: 'Label 1'	
    		},lineconfig,{
    			fieldLabel: 'Label 2'	
    		},lineconfig,{
    			fieldLabel: 'Label 2'	
    		}]
    	});
    
    });
    Last edited by zig999; 1 Apr 2009 at 5:27 PM. Reason: posted a new version with some style added

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    47
    Vote Rating
    1
    Maharshi is on a distinguished road

      0  

    Default Adding Separator in formpanel

    Adding Separator in formpanel


    Thanks,
    Do u have the gif ? can u please provide it?

  4. #4
    Ext User shibubh's Avatar
    Join Date
    Jul 2007
    Location
    Lamahi,Dang Nepal
    Posts
    449
    Vote Rating
    0
    shibubh is on a distinguished road

      1  

    Default


    check this. Untested
    Code:
    Ext.ns("Hulas.ux");
    Hulas.ux.line = Ext.extend(Ext.Component, {
      autoEl: 'hr'
    });
    
    Ext.reg('line', Hulas.ux.line);
    
    var formp = new Ext.FormPanel({
      title: 'Example form',
      renderTo: Ext.getBody(),
      width: 500,
      defaults: {
        xtype: 'textfield'
      },
      items: [{
        fieldLabel: 'Label 1'
      },{
        xtype: 'line'
      },{
        fieldLabel: 'Label 2'
      },{
        xtype: 'line'
      },{
        fieldLabel: 'Label 2'
      }]
    });
    Shibu Bhattarai

    Use JavaScript beautifier to beautify you code http://jsbeautifier.org/

    Code Conventions http://javascript.crockford.com/code.html

    ExtJS Core Manual http://extjs.com/products/extcore/manual/

  5. #5
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Maharshi View Post
    Thanks,
    Do u have the gif ? can u please provide it?
    Is just a 1x1 pixel. Use any image generator, create a 1x1 pixel image, paint with any color, save as gif. You're done.

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Why don't you just use css?

  7. #7
    Sencha User
    Join Date
    Sep 2013
    Posts
    3
    Vote Rating
    0
    atruptone is on a distinguished road

      0  

    Default


    xtype : 'menuseparator',
    width : '100%',

  8. #8
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    159
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default


    Shibub's way is definitely the clean way to do it, if you'd like you can even change the look of the <hr/> with CSS

    http://www.sencha.com/forum/showthre...l=1#post311564

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