Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288
    Vote Rating
    0
    httpdotcom is on a distinguished road

      0  

    Default Best method for multiple form elements on single line

    Best method for multiple form elements on single line


    I have a need to place multiple combo elements on the same line of a form (game search engine), and I am running into significant headaches.

    ie.
    Code:
    element 1:      ===========V
    element(s) 2:   ==V =======V
    element 3:      ============
    I have tried:
    - using ctCls config to phisically reposition the object using "relative" positioning (works fine in FF, but leaves large space in IE7 where object originally would have rendered)
    - building objects (label, combo1 and combo2-no_label) inside a "column" layout panel (panel displays, but elements do not)

    I really want to keep the consistent UI look, and don't want to have to hand code the elements. Any assistance/recommendations appreciated (code not necessary, but some direction would be most helpful).
    Current example can be found at http://www.ccgdb.com/duelmasters/index2.php (see index.php for straight HTML version of form)

    Current Code:
    Code:
    var frm = new Ext.form.FormPanel( {
    	autoHeight:	true,
                 bodyStyle: 	"padding: 10px 0px 5px 10px; border-top: 0; border-left: 0",
                 border: 	true,
                 header: 	false,
                 items: [
    	     { xtype:"textfield", name: "c_name", fieldLabel: "Card Name", allowBlank: true, width: 324 },
                  { xtype:"textfield", name: "c_text", fieldLabel: "Card Text", allowBlank: true, width: 324 },
    	     new Ext.ux.Multiselect( {
    	            name: "c_type", fieldLabel: "Card Type", store: c_type, height: 66, width: 321,
    	            dataFields:  ["key","val"], valueField: "val", displayField: "val" } ),
    	     { xtype:"combo", hiddenName: "c_subtype", fieldLabel: "Creature Type", width: 324, listWidth: 324, 
    	        lazyRender: true, store: c_subtype, valueField: "key", displayField: "val", mode: "remote",
    	        typeAhead: false, triggerAction: "all", editable: false },
    	     { xtype:"combo", hiddenName: "c_keyword", fieldLabel: "Abilities", width: 324, listWidth: 324, 
    	        lazyRender: true, store: c_keyword, valueField: "key", displayField: "val", mode: "local",
    	        typeAhead: false, triggerAction: "all", editable: false },
    	     { xtype:"combo", hiddenName: "c_civilization_condition", fieldLabel: "Civilization", width: 324, 
    	        listWidth: 324, lazyRender: true, valueField: "key", displayField: "val", mode: "local",
    	        store: new Ext.data.SimpleStore( {
    		fields: [ "key","val" ], data:[ ["any","match any selected civilization"],
    						["all","match all selected civilizations"] ]
    		} ), typeAhead: false, triggerAction: "all", editable: false, value: "any" },
    	     new Ext.ux.Multiselect( {
    		    name: "c_civilization", cls: "b", itemCls: "w", store: c_civilization, height: 66, 
    		    width: 321, dataFields: ["key","val"], valueField: "val", displayField: "val" } ),
    	     { xtype: "combo", 
                                     fieldLabel: "Cost", 
                                     hiddenName: "c_cost_condition", 
                                     lazyRender: true, 
                                     width: 39,
                                     store: c_conditions, 
                                     valueField: "key", 
                                     displayField: "val", 
                                     value: "=", 
                                     mode: "local",
                                     typeAhead: false, 
                                     triggerAction: "all", 
                                     editable: false },
     	     { xtype: "combo", 
                                     id: "cost", 
                                     hiddenName: "c_cost", 
                                     lazyRender: true, 
                                     hideLabel: true,
                                     width: 282, 
                                     store: c_cost, 
                                     valueField: "key", 
                                     displayField: "val", 
                                     height: 0,
                                     mode: "remote", 
                                     typeAhead: false, 
                                     triggerAction: "all", 
                                     editable: false,
                                     ctCls: "sub_combo" }, 
    	     { xtype: "combo", 
                                     fieldLabel: "Power", 
                                     hiddenName: "c_power_condition", 
                                     lazyRender: true, 
                                     width: 39, 
                                     store: c_conditions, 
                                     valueField: "key", 
                                     displayField: "val", 
                                     value: "=", 
                                     mode: "local", 
                                     typeAhead: false, 
                                     triggerAction: "all", 
                                     editable: false },
    	     { xtype: "combo", 
                                     id: "power", 
                                     hiddenName: "c_power", 
                                     lazyRender: true, 
                                     hideLabel: true,
                                     width: 282, 
                                     store: c_power, 
                                     valueField: "key", 
                                     displayField: "val", 
                                     height: 0,
                                     mode: "remote", 
                                     typeAhead: false, 
                                     triggerAction: "all", 
                                     editable: false,
                                     ctCls: "sub_combo" }, 
      	     new Ext.ux.Multiselect( {
    	            name: "c_rarity", fieldLabel: "Rarity", store: c_rarity, height: 66, width: 321,
    		    dataFields: ["key","val"], valueField: "key", displayField: "val" } ),
    	     new Ext.ux.Multiselect( {
    	            name: "c_release", fieldLabel: "Releases", store: c_release, height: 66, width: 321,
    		    dataFields: ["key","val"], valueField: "key", displayField: "val" } ),
      	     { xtype: "combo", fieldLabel: "Output Order", hiddenName: "order", lazyRender: true, width: 324,
    	       listWidth: 324, valueField: "key", displayField: "val", store: new Ext.data.SimpleStore( {
    	       fields: [ "key","val" ], data:[ ["card_number","Card Number"],["name","Card Name"] ] } ),
    	       typeAhead: false, mode: "local", triggerAction: "all", editable: false },
    	     { xtype: "hidden", name: "page_number", value: 1 }
    	],
             labelWidth:       100,
    	region:           "center",
             tbar: 		[ 
                  { text: "Search", minWidth: 100 },
                  { text: "Reset", minWidth: 100 } 
             ],
    	width: 		465
    } ) ;
    
    var output = new Ext.Panel( {
    	border:		false,
    	//layout:		"border",
    	region:		"east",
    	width:		"50%"
    } ) ;
    
    var search = new Ext.Panel( {
    	//autoHeight:	true,
    	border:		false,
    	height:		534,
    	items: 		[ frm,output ],
    	layout:           "border",
    	title:		"Search",
    	width:		"100%"
    } ) ;
    
    var panel = new Ext.TabPanel( {
            activeTab:      0,
            autoHeight:	true,
            autoScroll:     true,
            bodyBorder:     false,
            border:         true,
            deferredRender: true,
            enableTabScroll:true,
            frame:          true,
            id:             "tp",
            plain:          true,
            style:          "margin: 10px",
            tabPosition:    "top",
            width:          930,
            items: [
    	        search,
                    { title:        "Spoilers", contentEl: "" }
            ]
    } ) ;
    
    Ext.onReady( function() {
    	if ( Ext.isIE ) panel.setWidth( "100%" ) ;
           	panel.render( "ext" ) ;
    } ) ;
    </script>
    <style type="text/css">
         .b { color: #000; }
         .w { color: #fff; }
         .sub_combo { position: relative; left: 150px; top: -26px; height: 0; margin-bottom: 0; }
    </style>

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    no offense, but you should really consider cleaning up your code if you want better support from the community.
    Code:
         { xtype:"textfield", name: "c_name", fieldLabel: "Card Name", allowBlank: true, width: 324 },
                  { xtype:"textfield", name: "c_text", fieldLabel: "Card Text", allowBlank: true, width: 324 },
    	     new Ext.ux.Multiselect( {
    	            name: "c_type", fieldLabel: "Card Type", store: c_type, height: 66, width: 321,
    	            dataFields:  ["key","val"], valueField: "val", displayField: "val" } ),
    	     { xtype:"combo", hiddenName: "c_subtype", fieldLabel: "Creature Type", width: 324, listWidth: 324, 
    	        lazyRender: true, store: c_subtype, valueField: "key", displayField: "val", mode: "remote",
    	        typeAhead: false, triggerAction: "all", editable: false },
    	     { xtype:"combo", hiddenName: "c_keyword", fieldLabel: "Abilities", width: 324, listWidth: 324, 
    	        lazyRender: true, store: c_keyword, valueField: "key", displayField: "val", mode: "local",
    	        typeAhead: false, triggerAction: "all", editable: false },
    	     { xtype:"combo", hiddenName: "c_civilization_condition", fieldLabel: "Civilization", width: 324, 
    	        listWidth: 324, lazyRender: true, valueField: "key", displayField: "val", mode: "local",
    	        store: new Ext.data.SimpleStore( {
    		fields: [ "key","val" ], data:[ ["any","match any selected civilization"],
    						["all","match all selected civilizations"] ]
    		} ), typeAhead: false, triggerAction: "all", editable: false, value: "any" },
    	     new Ext.ux.Multiselect( {
    		    name: "c_civilization", cls: "b", itemCls: "w", store: c_civilization, height: 66, 
    		    width: 321, dataFields: ["key","val"], valueField: "val", displayField: "val" } ),
    	     { xtype: "combo", fieldLabel: "Cost", hiddenName: "c_cost_condition", lazyRender: true, width: 39,
                   store: c_conditions, valueField: "key", displayField: "val", value: "=", mode: "local",
    	       typeAhead: false, triggerAction: "all", editable: false },
     	     { xtype: "combo", id: "cost", hiddenName: "c_cost", lazyRender: true, hideLabel: true,
    	       width: 282, store: c_cost, valueField: "key", displayField: "val", height: 0,
    	       mode: "remote", typeAhead: false, triggerAction: "all", editable: false,
      	       ctCls: "sub_combo" }, 
    	     { xtype: "combo", fieldLabel: "Power", hiddenName: "c_power_condition", lazyRender: true, 
    	       width: 39, store: c_conditions, valueField: "key", displayField: "val", value: "=", 
    	       mode: "local", typeAhead: false, triggerAction: "all", editable: false },
    	     { xtype: "combo", id: "power", hiddenName: "c_power", lazyRender: true, hideLabel: true,
    	       width: 282, store: c_power, valueField: "key", displayField: "val", height: 0,
    	       mode: "remote", typeAhead: false, triggerAction: "all", editable: false,
    	       ctCls: "sub_combo" }, 
      	     new Ext.ux.Multiselect( {
    	            name: "c_rarity", fieldLabel: "Rarity", store: c_rarity, height: 66, width: 321,
    		    dataFields: ["key","val"], valueField: "key", displayField: "val" } ),
    	     new Ext.ux.Multiselect( {
    	            name: "c_release", fieldLabel: "Releases", store: c_release, height: 66, width: 321,
    		    dataFields: ["key","val"], valueField: "key", displayField: "val" } ),
      	     { xtype: "combo", fieldLabel: "Output Order", hiddenName: "order", lazyRender: true, width: 324,
    	       listWidth: 324, valueField: "key", displayField: "val", store: new Ext.data.SimpleStore( {
    	       fields: [ "key","val" ], data:[ ["card_number","Card Number"],["name","Card Name"] ] } ),
    	       typeAhead: false, mode: "local", triggerAction: "all", editable: false },
    	     { xtype: "hidden", name: "page_number", value: 1 }

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288
    Vote Rating
    0
    httpdotcom is on a distinguished road

      0  

    Default


    Are you suggest putting each config item on its own line? I was merely attempting to reduce the length of the post.

    The problematic code has been formatted/highlighted, so that anyone interested won't have to dig into all of the code.

  4. #4
    Ext User
    Join Date
    Jun 2008
    Posts
    25
    Vote Rating
    0
    ahartlen is on a distinguished road

      0  

    Default


    In order to have multiple items on the same line in a form you need (AFAIK) to place them inside of a panel that uses the column layout. This is what I've been doing, and it works perfectly. Here's an example from my existing app:

    Code:
    {
    	xtype : 'panel',
    	width : 800,
    	border : false,
    	frame : false,
    	layout : 'column',
    	items : [{
    		columnWidth : '.5',
    		layout : 'form',
    		items : [{
    			xtype : 'textfield',
    			fieldLabel : 'Quantity',
    			width : 80,
    			name : 'Quantity'
    		}]
    	}, {
    		columnWidth : '.5',
    		layout : 'form',
    		items : [{
    			xtype : 'textfield',
    			fieldLabel : 'Units',
    			width : 80,
    			name : 'Units'
    		}]
    	}]
    }

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You could use the TableFormLayout UX.

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288
    Vote Rating
    0
    httpdotcom is on a distinguished road

      0  

    Default


    @ahartlen - thanks for the info! I used your example to produce:
    Code:
    { xtype : "panel", 
      width : 430, 
      border : false, 
      frame : false, 
      height: 52, 
      labelWidth: 100,
      layout: "column", 
      items: [
    	{ columnWidth: .35, border: false, layout: "form", items: [
                    { xtype: "combo", 
                      fieldLabel: "Cost", 
                      hiddenName: "c_cost_condition",
                      lazyRender: true, 
                      width: 39, 
                      store: c_conditions, 
                      valueField: "key",
                      displayField: "val", 
                      value: "=", 
                      mode: "local", 
                      typeAhead: false,
                      triggerAction: "all", 
                      editable: false },
                    { xtype: "combo", 
                      fieldLabel: "Power", 
                      hiddenName: "c_power_condition",
                      lazyRender: true, 
                      width: 39, 
                      store: c_conditions, 
                      valueField: "key",
                      displayField: "val", 
                      value: "=", 
                      mode: "local", 
                      typeAhead: false,
                      triggerAction: "all", 
                      editable: false }
            ] },
            { columnWidth: .65, border: false, layout: "form", items: [
                    { xtype: "combo", 
                      id: "cost", 
                      hiddenName: "c_cost", 
                      lazyRender: true,
                      hideLabel: true, 
                      width: 278, 
                      store: c_cost, 
                      valueField: "key",
                      displayField: "val", 
                      mode: "remote", 
                      typeAhead: false, 
                      triggerAction: "all",
                      editable: false },
                    { xtype: "combo", 
                      id: "power", 
                      hiddenName: "c_power", 
                      lazyRender: true,
                      hideLabel: true, 
                      width: 278, 
                      store: c_power, 
                      valueField: "key",
                      displayField: "val", 
                      mode: "remote", 
                      typeAhead: false, 
                      triggerAction: "all",
                      editable: false }
            ] }
    ] },
    However, while the code does work, the elements do not render with the rest of the form. In FF3, the space for the elements is there, but the elements are not rendered, until I do something like open Firebug. (see http://www.ccgdb.com/duelmasters/index2.php for example). The same things happens in IE7, but I haven't been able to "manipulate" the page enough to make the elements render. (note: resizing the window/browser causes the objects to render)

    Any ideas?

    UPDATE - a call to formPanelVar.doLayout() after the initial render() fixed the issue (thanks to http://extjs.com/forum/showthread.php?t=41227) for the fix!

    @Animal - I will look into the extension. Thanks for the tip, however the code doesn't appear to be available from the Community Extensions page, and the various posts on http://extjs.com/forum/showthread.php?t=39342 makes it hard to piece together what the code for the extension is (since it isn't available as a downloadable file). Also, you mention in the post(s) that this is being worked on for Ext3, and I do not have access to that version at this time.