0

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>'
});

screenshot of failed ExtJS Panelige

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?

Community
  • 1
  • 1
ruffin
  • 16,507
  • 9
  • 88
  • 138

2 Answers2

2

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.

Brian Moeskau
  • 20,103
  • 8
  • 71
  • 73
  • Less opposed than hoping to postpone it. If time was infinite, rewriting would be The Right Thing to do, sure, but was hoping to write new in ExtJS and then work backwards as time permitted. A combo of 2+3 would be interesting to do (use what's there to help guide writing an Ext L&F), but yes, ultimately work better put into rewriting if there's no trivial way to "launder" the old forms, I think. Interesting point about user experience; I'd probably undervalued that. – ruffin Apr 20 '12 at 03:10
  • Welp, looks like that's the best answer we've got. Thanks for the feedback and reality check. – ruffin Apr 23 '12 at 01:30
0

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.

sha
  • 17,824
  • 5
  • 63
  • 98