ExtJS4 - Responsive layout and components - css

We have developed an application in Extjs 4.
We want to make it responsive.
Our Goal is :
When we resize window , it should automatically adjust components and update layout accordingly.
Can anyone guide me in correct direction?
Thanks in advance

So, basically you have only two options:
1) Make your own implementation using ExtJS and maybe bootstrap framework. Some clues you can get from this post and the following ExtJS 5 components:
https://www.sencha.com/forum/showthread.php?253766-Responsive-UI-and-ExtJS&p=1037960&viewfull=1#post1037960
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.mixin.Responsive
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.plugin.Responsive
2) You can migrate to Ext JS 5. I know it's painful but if you want to keep developing your application, this will be your best option as ExtJS 6 is officially announced.
The best place to start would be this guide: http://docs.sencha.com/extjs/5.0/whats_new/5.0/extjs_upgrade_guide.html

You can compare with new ExtJs 5.0.0 framework, or give a try on bootstrap framework with ExtJs 4

Related

Full Calendar 5.6.0 and Bootstrap 5

we are using Full Calendar on a webtie that uses Bootstrap in the Version 5 Beta.
I realized that the bootstrap theme for FullCalendar is made for Bootstrap 4, and is not fully compatible with Bootstrap 5.
Example of the implementation is here:
https://dev.swingstep.net/classes/heidelberg/heidelberg-calendar/
Eg:
Table borders are not recognized (maybe because there is a table inside a table?)
The modal "close" button is not working, though that also happens when I switch to standard theme, so maybe not bootstrap related.
Has anyone else encounterered this incompatibility - what would be the best way to go about it?
Is there a Bootstrap 5-ready version of the plugin on its way?
Best wishes, Oli

Date-Time-Range Picker in Angular 5

Currently implementing an angular 5 app and need to Incorporate a Date-Time-Range picker. Looking at some library which strictly does not use BootStrap or Jquery. Something using Angular Material will be ideal.
Any suggestions will be hugely appreciated.
Perhaps you could use/extend this custom date-range-picker:
https://github.com/Bigless27/date-range-picker
The only dependency seems to be the moment library.
See this video on how it was created: https://www.youtube.com/watch?v=ovamx9ePIuE

Material Design Lite Carousel

I am building a web application using Angular 4. For designing, I am using material design lite. However, I want to implement an interactive carousel using MDL that gives me smooth look and feel and goes well with my navbar but I cannot find any documentation for it on the web. Is it possible to do so? mynavbar-mdl
Is that what you're looking for? http://leifoolsen.github.io/mdl-ext/demo/carousel.html

Using MVC 4 CSS template instead of MVC 5 bootstrap.css files

So I am trying to change the CSS up in MVC 5 from the default bootstrap view that it renders. In some examples I have seen from MVC 4 which didn't use bootstrap by default I don't believe, it has a much better looking template in my opinion. MVC 5 has the plain black bar across the top, I know MVC 4 is also simple but I prefer that one. The only problem is I can't seem to find the source code, or the original CSS files they used for it anywhere? Every tutorial that I can find simply uses images instead of providing the files that I would need to add it to my project.
Here is the look I am going for...
http://i1.asp.net/media/45041/mvc4-restyled-templates.png?raw=true&cdn_id=2014-05-05-001
The default look that MVC 5 using bootstrap provides is..
http://eduardopires.net.br/wp-content/uploads/2013/07/aspnet_mvc5_build.jpg
Any suggestions on how I might switch to the previous version, or where I might find the proper CSS files to change it? I am trying to do this to an existing project so starting over really isn't an option. Thanks ahead of time.
You can install MVC4 side by side with MVC5 and create web project with MVC4 template. From there you can obtain the css you're looking

Is Bootstrap compatible with ASP.NET Telerik controls?

I have developed a site using ASP.NET Telerik controls and components. Its not working (positioning, screen resolution) fine on mobiles devices (scaling across resolutions).
I decided to integrate bootstrap in my site but bootstrap-responsive styles are not adjusting what I need.
Has anyone tried bootstrap with asp.net Telerik components? are both compatible?
Any suggestion/proper guide ?
There are incompatibilities between some frameworks like Bootstrap and Telerik. The main problem is different frameworks make use of CSS style names and if two different frameworks use the same name, there will be conflicts. I noticed this with the latest version of Bootstrap (3.0) and the latest version of Telerik, in some Telerik controls the checkbox formatting was over-ridden by Bootstrap. Unfortunately it's very tricky to fix, you need to customize it to a point that it would be easier not to use the framework at all.
Link Says
It depends on what you're trying to accomplish. In general, bootstrap
2.0 is a lot easier to work with along with Telerik because they style less of the default elements, like . In 2.0, they require you
to add some class to a element, which means that they don't
try to style a Telerik grid, for example. This makes it look better.
What you won't get is a "Bootstrap themed" version of the Telerik
controls. Continuing with the Telerik grid example, if you use that
in conjunction with Bootstrap it will look like a Telerik grid, not a
Bootstrap table, with it's nice pager buttons, etc. That will take a
lot of work to change, and I don't recommend it. Telerik emits html
with its own CSS class names and mapping that back to Bootstrap would
be a chore. I've found, actually, that with Bootstrap I use a lot
less of Telerik than I did before, and just use more straight html +
Bootstrap.
If you do decide to integrate Telerik in your site, I recommend the
Telerik "Simple" theme, which seems to match Bootstrap's default
colors best.
RadImageEditor icons are hidden when I use bootstrap.
So I must say that it is not 100% compatible.
If you need bootstrap to make your page responsive, you can use RadPageLayout: http://www.telerik.com/products/aspnet-ajax/responsive-page-layout.aspx. Thus, you can drop Bootstrap. Here is its documentation: http://www.telerik.bg/help/aspnet-ajax/page-layout-overview.html. In case you are using some styling it provides, perhaps RadFormDecorator can help you style the forms you have: http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx.
If you let me do a suggestion, you can check for MDBootstrap (it´s a front-end framework built on top of Bootstrap). There you will find an article with free ASP.NET templates.
Yes, I recently build ASP.NET 2013 Web Application using Bootstrap and Telerik ASP.NET Ajax version Q2 2015 and .NET Framework 4.5.1 .
During my implementation of this project, I had one issue:
• One issue is that when I use the RadAjaxManager, I got this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
• To fix this, I wrapped the code section with the control.

Resources