How to make plain html form match ExtJS look and feel

Question

Let's say I have a ton of existing html forms that I don't have the personpower to rewrite now, but I do want to do new development in ExtJS, then rewrite the old as we have time. Let's also say that I want to make the old forms look like they were created with ExtJS so that users aren't completely shocked going between the old forms and the new. Just to keep it challenging, let's also add that this should be ExtJS 2.2 [sic] compliant.

I hoped I could get away with something simple, like putting the html into a Panel and being done, as below. No such.

var pnlForm = new Ext.Panel({
    width:400,
    title:'Panel with a form',
    renderTo: Ext.getBody(),
    html: '<form>Test<br><input type="text"><br><input type="text"><br><input type="button" value="spam"></form>'
});

That's pretty obviously just an ExtJS Panel with default look & feel (that is, "no" look and feel) html in the middle.

And though I don't really want to go this route at all, I've also tried the slick "Convert html form to ExtJS" function from this post. It didn't work, but even then I'd rather just integrate look and feel rather than transmorgify anything.

Any easy way to launder existing html form code to match the look of new ExtJS content?

Answer 1

Only 3 options really:

1. Rewrite your code to use proper Ext JS creation syntax and then it should Just Work (sounds like you're opposed to doing this)
2. Do something like you posted, except you'd have to mirror the markup that Ext JS outputs and use the same CSS class names so that you'd be leveraging the existing CSS
3. Do as above, but write your own custom CSS to match the Ext JS look and feel for your own markup without necessarily having to recreate the Ext JS markup 1:1

Any way you choose, there's some effort. The downsides to #2 and #3 is that even though you can probably achieve visual parity, there will be a large functional difference when it comes to field behavior, validation, etc. that might come across as bugs to the end user. And this assume that you don't need any specialized input like date pickers.

There's no magic bullet for this. If it was me I'd go through the effort and do it the right way once and be done with it (#1). Any other option and you'll eventually end up redoing it anyway.

Answer 2

I think it will be easier and more productive to covert these forms into ExtJs style. You can write some kind of parser using perl or something like that.