ExtJS is a powerful JavaScript framework that provides a wide range of interactive and customizable UI components. These components can be utilized to create sophisticated web applications with rich user experiences. In this article, we will explore the usage of various ExtJS components, as well as their properties, events, and methods.

1. Window Component

The Window component is used to create draggable and resizable dialog windows. It can be instantiated with various configuration options, such as title, width, height, and buttons. For example:

    
      var win = new Ext.Window({
        title: 'My Window',
        width: 400,
        height: 300,
        items: [
          {
            xtype: 'panel',
            html: 'Content goes here...'
          }
        ]
      });
      win.show();

2. Grid Component

The Grid component is a powerful tool for displaying and editing tabular data. It supports features like sorting, filtering, grouping, and pagination. To create a simple grid, you can define a store with data and a column model with columns:

    
      var store = new Ext.data.Store({
        fields: ['name', 'email', 'phone'],
        data: [
          { name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' },
          { name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210' }
        ]
      });

      var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
          { header: 'Name', dataIndex: 'name' },
          { header: 'Email', dataIndex: 'email' },
          { header: 'Phone', dataIndex: 'phone' }
        ]
      });
      grid.render('myGrid');

3. Form Component

The Form component provides a convenient way to create input forms with various field types such as text fields, checkboxes, radio buttons, and more. Here's an example of creating a simple form:

    
      var form = new Ext.form.FormPanel({
        items: [
          {
            xtype: 'textfield',
            fieldLabel: 'Name',
            name: 'name'
          },
          {
            xtype: 'textfield',
            fieldLabel: 'Email',
            name: 'email'
          },
          {
            xtype: 'button',
            text: 'Submit',
            handler: function () {
              // Handle form submission
            }
          }
        ]
      });
      form.render('myForm');

4. Tree Component

The Tree component allows you to display hierarchical data in a tree-like structure. It is useful for representing directory structures, navigation menus, or any other data with parent-child relationships. Here's an example of creating a simple tree:

    
      var tree = new Ext.tree.TreePanel({
        root: {
          text: 'Root',
          expanded: true,
          children: [
            {
              text: 'Child 1',
              leaf: true
            },
            {
              text: 'Child 2',
              children: [
                {
                  text: 'Grandchild 1',
                  leaf: true
                }
              ]
            }
          ]
        }
      });
      tree.render('myTree');

Conclusion

ExtJS provides an extensive set of components that enable developers to build feature-rich web applications. The examples above only scratch the surface of what's possible with ExtJS. By understanding the usage of these components and their properties, events, and methods, you can leverage the full potential of the framework and create highly interactive user interfaces.

Whether you need draggable windows, data grids, input forms, or hierarchical trees, ExtJS has got you covered. Start exploring the documentation and unleash the power of ExtJS in your next web development project!

Request AI consultation