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