PDA

View Full Version : How to create <Input type="Submit" ... /> button



stevo.zilik
9 May 2012, 2:11 PM
Hi,

I'm doing login form with autocomplete and it's not working properly in IE.

I found the reason is that Ext.button.Button generates a <button ... /> tag, and I need an <input type="submit" ... /> tag.

What would be the best way to generate one, when I want to keep the look and feel of Ext.button.Button?

Thanks,
Stevo

scottmartin
17 May 2012, 11:14 AM
Does this help?
http://www.sencha.com/learn/basic-form-submit/

Regards,
Scott.

stevo.zilik
18 May 2012, 12:21 AM
Hi Scott,

sorry how is that supposed to help? There is no mention of generating input submit button...

Regards,
Stevo

vietits
18 May 2012, 12:57 AM
Try this:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
autoEl: {
tag: 'input',
type: 'submit',
value: 'Test'
}
});

stevo.zilik
18 May 2012, 4:33 AM
Try this:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
autoEl: {
tag: 'input',
type: 'submit',
value: 'Test'
}
});




without even trying, that piece of code can't possibly generate look and feel of an Ext.button.Button

scottmartin
18 May 2012, 4:56 AM
Perhaps we do not understand your request. Please be more specific of what you are trying to do here.
All you have presented to use is a simple line of HTML and no ExtJS code.

Are you saying you want to create a button in HTML, but have it look like ExtJS button?

Scott.

stevo.zilik
18 May 2012, 8:02 AM
Perhaps we do not understand your request. Please be more specific of what you are trying to do here.
All you have presented to use is a simple line of HTML and no ExtJS code.

Are you saying you want to create a button in HTML, but have it look like ExtJS button?

Scott.

Yes, I'd like to have a button that looks and feels like Ext.button.Button and contains <input type="submit" ... /> element instead of <button .... /> element.

castitas
18 May 2012, 8:35 AM
Is the button outside of an Ext app, and do you want the same kind of behavior as an Ext button (interaction with controller; I assume not, since you have type="submit")?

stevo.zilik
22 May 2012, 12:59 AM
Is the button outside of an Ext app, and do you want the same kind of behavior as an Ext button (interaction with controller; I assume not, since you have type="submit")?

It might be inside an Ext.form.Panel, but not Ext app in the true sense, no Controllers involved. What I'm after is the <input ... /> tag markup to be rendered and the button looking like Ext.button.Button. I'll handle the actions explicitely...

castitas
22 May 2012, 10:29 AM
Putting the input tag inside the Ext button won't do anything. Could you put type="submit" in the button's element?

Why are you loading Ext, but not using it? If you want the looks, can't you just use their css?

stevo.zilik
24 May 2012, 4:11 AM
Putting the input tag inside the Ext button won't do anything. Could you put type="submit" in the button's element?

It will. When the user presses the button, it will submit the parent form.


Why are you loading Ext, but not using it? If you want the looks, can't you just use their css?

how exactly do I use their css?

sword-it
24 May 2012, 4:53 AM
Hi!
Take a look on this sample:-





new Ext.Button({ text: 'Search', renderTo: 'btn1', type: 'submit'});


take a look at http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-cfg-type

stevo.zilik
24 May 2012, 6:21 AM
Hi!
Take a look on this sample:-





new Ext.Button({ text: 'Search', renderTo: 'btn1', type: 'submit'});


take a look at http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-cfg-type

that will still generate <button type="submit ... /> tag

castitas
24 May 2012, 7:41 AM
Do you have firebug in firefox? Create a button, look at the class of the button's div (the Ext button is composed of an icon and a text span, in an em tag, in a div tag). Create an input tag as you would like, then give it the same class as the Ext button's div. If you've loaded Ext on the page, the css will apply automatically.

Why are you not using a controller?

------

It will. When the user presses the button, it will submit the parent form.

Aren't the input and button tag mutually exclusive?

stevo.zilik
24 May 2012, 10:39 AM
Do you have firebug in firefox? Create a button, look at the class of the button's div (the Ext button is composed of an icon and a text span, in an em tag, in a div tag). Create an input tag as you would like, then give it the same class as the Ext button's div. If you've loaded Ext on the page, the css will apply automatically.


cool I'll try that. Although I was hoping that I can just tell ext.js to render 'input' instead of 'button' tag, using the Ext.button.Button class



Why are you not using a controller?


I guess it's a personal thing, but I want to keep it as simple as possible. Developing an ASP.Net MVC website with controllers and views, don't want to put another layer of javascript MVC on top of it. Besides I don't trust javascript, want to stay away from it as much as possible... :)


------



Aren't the input and button tag mutually exclusive?


Not sure, probably. Note that I don't want a button tag, I want it to be replaced with input tag