Skip to main content

Glimpse of Ext js Containers

Container layout:
  • The Container layout is the default layout for any instance of Container and simply places items on the screen, one on top of.
  • Container layout does not explicitly resize child items.
  • It also serves as the base class for all other layouts
  • Implementing a container layout is extremely simple, requiring you to just add and remove child items.
Anchor Layout:
  • The Anchor layout is similar to the Container layout
  • It adds dynamic sizing to the mix using an anchor parameter specified on each child
{title : 'Panel1',
anchor : '100%,5%',
frame : true}

Form Layout:
  • The form layout is just like the anchor layout
Absolute layout:
  • Absolute layout is by far one of the simplest to use. It fixes the position of a child by setting the CSS “position” attribute of the child’s element to “absolute” and sets the top and left attributes to the x and y parameters
Fit Layout:
  • The ‘fit’ layout forces a Container’s single child to “fit” to its body and is, by far, the simplest of the layouts to use
  • The fit layout is a great solution for a seamless look when a Container has one child.
Accordion Layout:
  • The Accordion layout, a direct descendant of the fit layout, is useful when you want to display multiple Panels vertically stacked, where only a single item can be expanded or contracted.
  • One important to note that the accordion layout can only function well with Panels and two of its descendants, GridPanel and TreePanel. This is because the Panel (and the two specified subclasses) has what is required for the accordion to function properly. If you desire anything else inside of an accordion such as a tab panel, simply wrap a panel around it and add that panel as a child of the Container that has the accordion layout.
Card Layout:
  • In order to create a wizard-like interface, we need to create a method which we can control the card flipping
Column Layout:
  • Like the Anchor layout, the Column layout allows you to set the absolute or relative width of the child Components
  • Organizing components into columns allows you to display multiple components in a Container side by side.
  • The meat of the Column layout its onLayout method, which calculates the dimensions of the Container’s body
  • it first subtracts the width of each of the absolute-width child components from the known width of the containers body
  • Now that the Column layout knows exactly how much horizontal space it has left, it can set the size of each of the child components based on the percentage
HBox and VBox layouts:
  • behavior is very similar to the Column model
  • you can change the alignment of the child items both vertically and horizontally
  • ability to allow the columns or rows to stretch to their parent’s dimensions if required
  • to properly exercise the different layout configuration parameters for which we can specify two, pack and align. Where pack means “vertical alignment” and align means “horizontal alignment”.
  • The pack parameter accepts three possible values; start, center and end.
  • The align parameter accepts four possible values: ‘top’, ‘middle’, ‘stretch’ and ‘stretchmax’.
  • The last configuration parameter that we must explore is “flex”, which is similar to the columnWidth parameter for the columnLayout and gets specified on the child items
  • Lets say for instance, you would like each of the columns to have equal widths. Simply set each column’s flex to the same value, and they will all have equal widths.
The Table layout:
  • The table layout gives you complete control over how you want to visually organize your components.
  • Building a table of Ext Components however, is different as we specify the content of the table cells in a single dimension array, which can get a little confusing.
  • we set a layoutConfig object, which sets the number of columns with "columns :" property.
  • Often we need sections of the table to span multiple rows or multiple columns. To accomplish this, we specify either the rowspan or colspan parameters explicitly on the child items.
The Border layout:
  • The Border Layout made its début in 2006, back when Ext was merely more than an extension to the YUI Library and has matured into an extremely flexible and easy to use layout that provides full control over its sub-parts or “regions”. These regions are aptly named by polar coordinates: north, south, east, west and center.
ref: Ext Js in Action
Labels:

Comments

Post a Comment

Popular posts from this blog

Installing MS SQL Server driver on Ubuntu Linux

Although making a connection to SQL Server can be done using unixODBC and FreeTDS, it does not work with some collations on SQL Server 2008. Recently, Microsoft released an ODBC driver for Linux that works on 64-bit systems only. Installing the driver is tricky. I begin by installing the build-essential, which is required for compiling from source. Checkinstall can be installed if you want to add the following application to the package manager. $ sudo apt-get install build-essential  Download unixODBC-2.3.0  and Microsoft ODBC dirver  and extract. $ sudo wget ftp://ftp.unixodbc.org/pub/unixODBC/unixODBC-2.3.0.tar.gz $ tar xvf unixODBC-2.3.0.tar.gz $ wget http://download.microsoft.com/download/6/A/B/6AB27E13-46AE-4CE9-AFFD-406367CADC1D/Linux6/sqlncli-11.0.1790.0.tar.gz $ tar xvf sqlncli-11.0.1790.0.tar.gz  Install the unixodbc using the following commands: $ ./configure --disable-gui --disable-drivers --enable-iconv --with-iconv-char-enc=UTF8 --with-ico...
6 comments
Read more

Installing pyodbc on ubuntu

Installing pyodbc is straight forward but if  getting     "error: command 'gcc' failed with exit status 1"  when installing pyodbc, make sure you have installed  requirements  as below. sudo apt-get install unixODBC-dev g++ pip install pyodbc
2 comments
Read more

Monkey Patching Django Model Class

Django is shipped with some useful application, also there are lots of third party re-usable application written for Django. Sometime you need to modify or customize these applications(Models of application) to meet your software requirements. One of the usual solution is adding a Model class to have a one-to-one relationship with the third party Models. This solution has some disadvantages such as having more tables and classes which can highly adversely affect database performance, scalability and add more complexity to the software development.  I think of another solution to this problem. I used Django South along with monkey patching of third party Model classes. I added a field to Django user class. Here is a walk through over this approach. 1. Add an application: python manage.py startapplication userpatch 2. Add the following  code to add the new field to the user class from django.db import models from django.contrib.auth.models import User ...
1 comment
Read more