1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    49
    Vote Rating
    0
    Joche is on a distinguished road

      0  

    Default Need: Example on Ext.form together with template

    Need: Example on Ext.form together with template


    (Gosh, can't we get a few more characters in the subject field, please...)

    Today I'm building up forms with javascript as shown in the form example.
    Code:
    ie. this.formDiv = this.bodyDiv.createChild({tag:'form',id:'newsDocForm',name:'newsDocForm'});
    I do like the template approach better, but need some advice sample or example on how to implement these two together. I guess i'm adding only DIV elements to the template and then populate them with a Ext.form field. However, it's important that they really become INPUT fields with name so I can use the

    formUpdate method in the updatemanager.

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

      0  

    Default


    To get any kind of complexity, you end up with an enormous DomHelper spec.

    I've used DomHelper to create elements, and it soon gets hairy when you have child elements with children etc etc...:

    Code:
    	dlg = new Ext.LayoutDialog("iconUploadDialog", {
    		autoCreate: {
    			tag: "div", cls: "x-dlg", children: [ {
    				tag: "div", cls: "x-dlg-hd"
    			}, {
    				tag: "div", cls: "x-dlg-bd", children: [ {
    					tag: "form", id: "iconUploadForm", target: "iconUploadImgContainer",
    					method: "POST", action: fcl.util.resolveUrl("/UploadIcon.do"),
    					enctype: "multipart/form-data", children: [ {
    						tag: "input", type: "hidden", "name": "entityClass", value: entityClass
    						}, {
    						tag: "input", type: "hidden", "name": "id", value: id ? id : ""
    						}, {
    						tag: "table", id: "iconUploadTable", cellspacing: "10", style: "border-collapse:separate", children: [ {
    							tag: "tbody", children: [ {
    								tag: "tr", children: [ {
    									tag: "td", children: [ {
    										tag: "input", type: "radio", checked: true, "name": "iconUploadType", value: "url", style: "margin-right:10px"
    									}, {
    										tag: "span", html: "URL:"
    									} ]
    								}, {
    									tag: "td", children: [ {
    										tag: "input", cls: "asp-input-element", "name": "iconUrl", style: "width:300px"
    									} ]
    								}, {
    									tag: "td", children: [ {
    										tag: "span", html: "Store on server:"
    									}, {
    										tag: "input", type: "checkbox", value: "true", "name": "store", style: "margin-left:10px"
    									} ]
    								} ]
    							}, {
    								tag: "tr", children: [ {
    									tag: "td", children: [ {
    										tag: "input", type: "radio", "name": "iconUploadType", value: "file", style: "margin-right:10px"
    									}, {
    										tag: "span", html: "File :"
    									} ]
    								}, {
    									tag: "td", children: [ {
    										tag: "input", type: "file", "name": "fileContent", size: "34", style: "width:300px"
    									} ]
    								}, {
    									tag: "td", html:
    										'<select name="imageType">' +
    											'<option value="JPEG">image/jpeg</option>' +
    											'<option value="GIF">image/gif</option>' +
    											'<option value="PNG">image/png</option>' +
    											'<option value="BITMAP">image/bmp</option>' +
    											'<option value="TIF">image/tif</option>' +
    										'</select>'
    								} ]
    							}, {
    								tag: "tr", children: [ {
    									tag: "td", colspan: "3", children: [ {
    										tag: "input", type: "submit", value: "Set", title: "Set the icon"
    									}, {
    										tag: "input", type: "submit", "name": "clearIcon", value: "Clear", title: "Clear the icon"
    									} ]
    								} ]
    							} ]
    						} ]
    					}, {
    						tag: "iframe", cls: "x-layout-inactive-content", 
    						id: "iconUploadImgContainer",
    						"name": "iconUploadImgContainer",
    						src: entityImageUrl,
    						style: "border:0px none;height:100%;width:100%"
    					} ]
    				} ]
    			}, {
    				tag: "div", cls: "x-dlg-ft"
    			} ]
    		},
    		north: {
    			initialSize: 105
    		},
    		center: {
    			titleBar: true,
    			title: fcl.util.getMessage("currentIconImage"),
    			autoScroll: false
    		},
    		height: 550,
    		width: 600,
    		ficedcenter: true
    	});

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    49
    Vote Rating
    0
    Joche is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal
    To get any kind of complexity, you end up with an enormous DomHelper spec.
    Yes, and that's why I want to take the template path instead, but could use a kick-start on how to 'decorate' the fields/objects within the template so they become Ext.form fiels.

  4. #4
    Ext User
    Join Date
    Apr 2007
    Posts
    2
    Vote Rating
    0
    jamespan is on a distinguished road

      0  

    Default


    yes,i want to know the resolvent

Similar Threads

  1. Ext.DomHelper.Template: one template, ten YUI grids
    By moraes in forum Community Discussion
    Replies: 11
    Last Post: 18 Dec 2012, 4:55 AM
  2. Working with Ext.form and Ext.template, best practice?
    By Joche in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 22 Mar 2007, 11:24 PM
  3. Ext.Template - conditions possible?
    By Saeven in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Mar 2007, 12:31 PM
  4. Ext.DomHelper.Template or Ext.Template?
    By mystix in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Mar 2007, 3:05 PM

Thread Participants: 2