I've been asked to do the front end for a web app, and to use ExtJS specifically.
I've been working through a couple of tutorials, but I've not seen much variation on the default ExtJS look and feel except for some subtle changes to the colors and what not.
The design I've been handed seems to be a radical departure from the standard ExtJs look and feel. So before I head down a dead end or start chasing wild geese, I wondered wether any ExtJS experts out there could point out any potential pit falls in the design, or is everything do-able?
The design is here...
Definitely possible, IF you have pretty strong CSS skills and not afraid to customize the JS components to some extent. You're going to be overriding a lot of the default stylesheet content to get this look-and-feel, and for certain aspects it may require tweaking the markup generated by a component by default. If you are new to Ext JS this may be a bit daunting, but once you wrap your head around it you can do about anything you want.
Yes, it is definitely possible.
ExtJS is designed to be easily customised. With some CSS knowledge, you should not have problems getting that look and feel.
Just as an example, you may want to check out this service, which uses a very customized ExtJS skin:
Filespots - Find Out More
ExtJS Forum - Disussing Filespots
Filespots using ExtJS http://www.filespots.com/static/web/images/en/invite-users.jpg
Related
So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P
So this is my first time posting here but I'm more or less stumped. Basically what I have is an ext grid that loads a bunch of data. Among these columns are all these date fields. Start, Finish, Etc. I'm trying to create a date picker to edit these columns. I've experimented with the different ext component editors and I was able to hack together something that mostly worked but what I would really prefer is a way to use my own custom date picker or even better a third party solution like the JQuery UI date picker.
Neither extending nor overriding the editor seemed to do the trick. I'm not so much looking for code but more whether this is even possible with ext and if so maybe to be pointed in the right direction. So has anyone ran into a similar problem? Thanks in advance.
It seems to me that it would be fairly straight forward to extend Ext.form.field.Picker and use the jQuery date picker as the picker part. I've wrapped the FCK editor in an Ext component and it was very easy to do. Picker involves a few more moving parts, but I think it's worth a try.
That being said, the idea of picking a few parts of ExtJS to use in a non-Ext app and then trying to marry other things into Ext is going to be painful. I strongly advise fully embracing ExtJS and then choosing very carefully where you stray away. Another approach might be to use a different grid system (sorry Evan) that plays nicer with jQuery.
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.
I was contemplating writing a UI toolkit where setting the position and size of an element/widget was intuitive and powerful. Here are some examples of how it would be used (not currently implemented):
ui("Panel").size(". 40").pos("0 0").attach(element);
ui("Textarea").size(". %-10").pos("0 40").attach(element);
ui("Panel").size(". 10").pos("0 bottom+5");
Where . means auto, % means 100% and the possibility to add pixels to percentages.
Does anything like said exist (even as a jQuery plugin or something)? Somethings just aren't possible with pure CSS.
If you want to create it in Javascript you will have to make the script read the ui code then convert to css. This would cause too much overhead and wouldn't really be worth the hassle. It would be nice to have a quicker more intuitive way to create styles but unfortunately without paying in efficiency it wont work too well.
I would be very wary before lunching into this. This would give any devloper joining your project a major headache of needing to learn your new layout mechanisims.
I have yet to see what CSS can not do, so you may want to look into what it can do further before going ahead look at the various examples from http://www.csszengarden.com/ . I'm not saying CSS is easy but it is standard.
If you need more power look at CSS3 the majority of which can be achived using jQuery.
Sorry to say but I think you are heading down the wrong road by building your own. Use standard, tested, well knowen and documented way. Don't reinvent the wheel unless you are in the wheel making business.
What grid library does swivel.com use? It looks pretty nice. Is it made inhouse? In other words, what good JS grid libraries are available?
it's made inhouse with prototype. not that much actual scriptaculous stuff is needed for the grid though. we initially looked at dojo's grid when we started (about 6 months ago) and it didn't do as much as we needed and we would've had to customize the hell out of it anyway. mootools might have a decent one now too.
Swivel is a Ruby on Rails site and is using Prototype and script.aculo.us. The CSS doesn't look like any particular system that I recognize but that's not surprising. I think rolling your own CSS is way more common than using some CSS "framework".