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

      0  

    Default Basic Dialog Form plus submit example?

    Basic Dialog Form plus submit example?


    I have looked all over, but cant seem to find what I want and assume there isnt an existing example.

    I want a simple dialog that gathers email address and website address....

    Can anyone point me in the right direction? I pretty new to YUI and Jacks excellent yui-ext work.

    Your helps would be most welcomed.

    Thanks,

    Rob

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

      0  

    Default


    This is what we doctors call "work".

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

      0  

    Default


    I'm sure you do....

    However, I am working pretty hard to get my head round this. What I'm doing I am sure is a very common task thats been done loads in yui-ext. I'm sure an example, or tutorial exists, or maybe someone out there is willing to share some EXISTING code I can get an idea from. I just want a nudge in the right direction.

    I didnt ask you to do it for me did I?

    I am a new member here.... this is my second post, and with respect (as an owner of a large forum myself), I dont think your reply was in any way helpful or constructive.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    As the owner of large forum, you should be familar with the numerous posters who want something for nothing. Your post doesn't indicate that you tried and ran into a problem, which somebody might have a solution for.

    Did you try to put a form in the simple dialog sample? Did you look at the samples at all? You could probably drop the dialog from the blog sample into your app with little effort.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    17
    Vote Rating
    0
    rob30UK is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    As the owner of large forum, you should be familar with the numerous posters who want something for nothing.
    Yes, We get that a fair bit being a design / development forum... and the help is usually given in cases where people have tried. We get a lot of 'do my homework' posts which frankly upset me in much the same way as they probabally upset you.
    Quote Originally Posted by tryanDLS
    Your post doesn't indicate that you tried and ran into a problem, which somebody might have a solution for.
    - Well, that is true, yes - I apologise.... fact is, I've been banging my head on the wall with it for hours. I can get the form in the dialog, of course, but how to submit it with ajax and then close the form - I've been looking for something that can validate input also.

    I am a server side developer (mainly ASP and a tiny bit of PHP) and AJAX (the javascript bit) is kind of hard to bend my brain around as ASP isnt really an OOP language.

    Quote Originally Posted by tryanDLS
    Did you try to put a form in the simple dialog sample? Did you look at the samples at all?
    Yes I did look at the samples.... but was looking for one with a form (any form) that submits via AJAX, and then closes.
    Quote Originally Posted by tryanDLS
    You could probably drop the dialog from the blog sample into your app with little effort.
    Thats sounds as though it would have everything in it I would need to learn from....... I just cant find it... it's not in the documentation under examples as far as I can tell... maybe I'm blind. Do you have a url?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    It's not in the doc center, but it is in the examples folder of the download pkg in examples\dialog\blog.html. The tabs examples I believe also illustrate using UpdateManager to load tab content via Ajax.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Hi Rob,

    The problem for us is that there are lots of ways to accomplish things and the question was pretty open-ended. Also, it's hard to summarize what you're asking in a breif answer as there are lots of pieces of code required for a good example. Most people are busy actually building their apps, not putting together tutorials (hopefully this will change, but realize that the framework is still only a few months old and we're mostly pretty new too!).

    That said, I'll try to point you in the right direction.

    I have a page with a form in a dialog like so (all html/code abbreviated obviously):

    Code:
    <form action="[server page]" name="myform" method="post" id="myform" onsubmit="return false;">
    		<div id="my-dlg" style="visibility:hidden;">
    			<div class="ydlg-hd" id="title">Dialog Title</div>
    			<div class="ydlg-bd">
    				<div id="main-tab" class="ydlg-tab" title="Details">
    					<div class="inner-tab">
    						<input type="hidden" id="evt-id" name="id" />
    						<label for="title">Title:</label> <input type="text" id="evt-title" name="title" />
    
    						<label for="startdate">Start:</label> <input type="text" id="evt-startdate" name="startdate" />
    
    						<label for="enddate">End:</label> <input type="text" id="evt-enddate" name="enddate" />
    
    						<label for="url">Url:</label> <input type="text" id="evt-url" name="url" />
    					</div>
    				</div>
    				<div id="info-tab" class="ydlg-tab" title="Additional Info">
    					<div class="inner-tab">
    						[more form elements or whatever]
    					</div>
    				</div>
    			</div>
    			<div class="ydlg-ft">
    				<div id="dlg-msg">
    					<span id="post-error" class="posting-msg">[img]../../images/warning.gif[/img]<span id="post-error-msg"></span></span>
    					<span id="post-wait" class="posting-msg">[img]../../images/grid/loading.gif[/img]Saving event...</span>
    				</div>
    			</div>
    		</div>
    Standard form wrapped in a tab div, wrapped in a dialog structure. Note the onsubmit="return false;" so the form doesn't post the page back. Make sure that the form wraps your dialog and is not embedded inside it -- otherwise it will not submit correctly. You'll need js code that actually sets up the dialog -- see the docs for that. The trick to getting a button is adding it programmatically to the dialog:

    Code:
    okButton = evtDialog.addButton('Save', this.saveForm, this);
    Then you simply code the "saveForm" routine that does all the work. Again, there are many ways of doing this depending on what platform etc. Here's an example of just using the YUI way of doing it:

    Code:
    		saveForm : function(e) {
    			okButton.disable();
    			YAHOO.util.Connect.setForm(document.getElementById('myForm'));
    			
    			var successCB = function(o){
    				try {
    					okButton.enable();
    					var data = renderer.parse(o.responseText);
    					if (data) {
    						if (data.status == "ok") {
    							renderer.replace(data.event);
    							dialog.hide();
    							this.showMsg('Event "' + data.event.title + '" was updated');
    						}
    						else {
    							// show dialog errors
    							alert(data.msg);
    						}
    					}
    					else {
    						alert(o.responseText);
    					}
    				} 
    				catch(er) {
    					alert(er);
    				}
    			};
    
    			var failureCB = function(o){
    				okButton.enable();
    				alert(o.responseText);
    			};
    
    			YAHOO.util.Connect.asyncRequest('POST', '[server page]', 
    				{ success: successCB, failure: failureCB, scope: this });
    		},
    There's lots of stuff in here that I don't have time to explain, like how to implement a custom renderer, etc. but it shows submitting the form, getting the callback, and hiding the dialog only on success (dialog.hide()). This should point you in the right direction, but please take the time to go through the example projects, esp. the feed viewer. That's what most of us have done to learn it and get examples!

    HTH, Brian

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Re: validating input, that is not there yet except for the validators built into the grid class. However, the next major version of Ext AFTER .40 will most likely contain a comprehensive forms architecture including generic form validation. For now, however, you'll have to roll your own.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    17
    Vote Rating
    0
    rob30UK is on a distinguished road

      0  

    Default


    bmoeskau, I cant thank you enough...

    Between your code, and the example you kindly pointed me too (which was under my nose... rofl) I'l easy have enough to take it from here.

    I will be making a donation to the project once this app is built.

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Hey Rob,

    Glad it helped. If you have any specific issues getting things working, please don't hesitate to post your code! The folks here are usually pretty quick to spot issues and suggest solutions when there's something to look at.

    Brian

Similar Threads

  1. how to submit a form split over several tabs?
    By raphinou in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 1 Jun 2007, 7:20 AM
  2. ID of submit within form masks submit function
    By aconran in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2007, 12:08 AM
  3. BasicDialog: how to submit a form without AJAX.
    By moraes in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jan 2007, 7:02 AM
  4. BasicDialog with one TabPanelItem a try to submit form
    By JuanParraC in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 4 Dec 2006, 12:15 AM
  5. Basic Dialog and form submit
    By JC in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 21 Nov 2006, 12:44 AM

Thread Participants: 3