Book Image

Learning Ext JS_Fourth Edition

Book Image

Learning Ext JS_Fourth Edition

Overview of this book

Table of Contents (22 chapters)
Learning Ext JS Fourth Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Implementing responsiveness to the application


For implementing responsiveness in our applications we have two fundamental classes in Ext JS, and those are:

  • Ext.plugin.Responsive

  • Ext.mixin.Responsive

These two classes work in the same way but there is a difference, as follows:

  • Ext.plugin.Responsive must be used for already created components

  • Ext.mixin.Responsive must be used for classes or components that we create or extend

Creating responsiveness

Let's create a simple HTML file, name it responsive_01.html, and add the following content:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive - 01 - basic sample</title>
  <link rel="stylesheet" type="text/css" href="../ext-5.1.1/packages/ext-theme-neptune-touch/build/resources/ext-theme-neptune-touch-all.css">
  <script src="../ext-5.1.1/build/ext-all.js"></script>
  <script src="../ext-5.1.1/packages/ext-theme-neptune-touch/build/ext-theme-neptune-touch.js"><...