Book Image

Ext JS Application Development Blueprints

Book Image

Ext JS Application Development Blueprints

Overview of this book

Table of Contents (18 chapters)
Ext JS Application Development Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The head of the family


Refer to the Header.js file:

// app/view/header/Header.js
Ext.define('Postcard.view.header.Header', {
    extend: 'Ext.Toolbar',
    requires: ['Postcard.view.header.HomeButton'],
    xtype: 'app-header',
    height: 60,
    controller: 'header',
    viewModel: 'header',
    session: true,
    items: [
        { 
            xtype: 'home-button', cls: 'title', html: 'Postcard',
            bind: { hidden: '{menuButton.pressed}' }
        },
        {
            xtype: 'tbspacer',
            bind: { hidden: '{menuButton.pressed}' } },
        { 
            xtype: 'textfield', flex: 1,
            cls: 'search-box', emptyText: 'Search', 
            bind: '{searchTerm}',
            plugins: ['responsive'],
            responsiveConfig: {
                'tall': { 
                    hidden: true,
                    bind: { hidden: '{!menuButton.pressed}' }
                }, 
                'wide': { hidden: false } 
            }
        },
        { 
       ...