Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Getting Started

Page of 168

During this exercise you will perform the following tasks:

  • Define a new Sencha Architect project
  • Define a Viewport
  • Define a toolbar
  • Define draggable and resizable windows

Description

During this exercise you will configure a Viewport to hold your application and lay out the window components that will render your application data.

Design this Viewport using Sencha Architect

Steps

Create the Project

  1. Run Sencha Architect
  2. Select File > New Project > Ext JS 4.2.X
  3. Click the Save button
  4. Click the Browse button and select /path/to/arch101/desktop/lab
  5. Enter a project name of exercise2
  6. Click the Save button.
  7. Click on the Settings button
  8. Click on the Project tab
  9. Enter the following information:
    • URL Prefix: http://localhost/arch101/desktop/lab/exercise2
  10. Click the Save button.

Define the Application and Launch Method

  1. In the Project Inspector, click on Application and configure the following properties:
    • name: SpendingPortal
    • requires: Ext.window.MessageBox
    • autoCreateViewport: checked
  2. In the Config panel, click the [+] adjacent to the launch property.
  3. In the Project Inspector, double-click on launch
  4. Enter the following code:
Ext.Msg.alert('Welcome!','Welcome to the Spending Portal.');

 

Define the Viewport

  1. Click the Design button.
  2. From the Toolbox, drag a Viewport container on to the design canvas.
  3. Click the Save button.
  4. Click Preview. The alert box containing your welcome message should appear.

Define the Viewport Layout

  1. Return to Sencha Architect.
  2. In the Project Inspector, click on the MyViewport view and configure the following properties:
    • userClassName: Main
    • layout: border
  3. From the Toolbox, drag a Toolbar and drop it onto the Design Canvas.
  4. In the Config panel, modify the following properties:
    • region: north
    • itemId: maintoolbar
    • floatable: unchecked
    • height: 30
  5. From the Toolbox, drag a Panel and drop it onto the Design Canvas.
  6. Configure the following Panel properties:
    • region: center
    • itemId: centerpanel
    • title: (none)
Configure the Toolbar
  1. From the Toolbox, drag a Toolbar Text Item and drop it onto the toolbar in the Design Canvas.
  2. In the Design Canvas, double-click on the toolbar text item and enter the following text:

    Congressional Earmark Browser

  3. From the Toolbox, drag a Toolbar Fill object and drop it onto the Toolbar in the Design Canvas, placing it to the right of the "Congressional Earmark Browser" text.
  4. From the Toolbox, drag a Button and drop it onto the Toolbar in the Design Canvas, placing it to the right of the Toolbar Fill object.
  5. In the Design Canvas, double click on the MyButton button and change its label to "Feedback"
  6. Save, Publish, and Preview the App. Note that when you hover your mouse over the Feedback button it "lights up." You will define a button action later in this unit.

Define the Application View Windows

  1. From the Toolbox, drag and drop a Window onto the Views heading in the Project Inspector.
  2. Configure the following properties:
    • userClassName: Sponsors
    • userAlias: sponsors
    • autoShow: true
    • height: 600
    • width: 472
    • layout: fit
    • title: Congressional Representatives
    • constrain: true
    • maximizable: true
    • minimizable: true
    • closable: false
  3. In the Project Inspector, right-click on the Sponsors window and select Duplicate. This will define another window named MyWindow1.
  4. Configure the following properties for MyWindow1:
    • userClassName: Earmarks
    • userAlias: earmarks
    • height: 250
    • width: 500
    • layout: border
    • title: Please Select Sponsor(s)
  5. In the Project Inspector, right-click on the Earmarks window and select Duplicate. This will define another window named MyWindow2
  6. Configure the following properties for MyWindow2:
    • userClassName: SponsorChart
    • userAlias: sponsorchart
    • height: 320
    • width: 500
    • layout: fit
    • title: Compare Expenditures

Instantiate the Windows

  1. In the Project Inspector, double-click on the launch function.
  2. Replace the existing code with the following:
Ext.ComponentQuery.query('#centerpanel')[0].add(
 { xtype: 'sponsors', x:5, y:20  },
 { xtype: 'earmarks', x: 500, y: 20},
 { xtype: 'sponsorchart', x:500, y: 300}
);
  1. Click the Save button.
  2. Click Preview. Your application's GUI should appear similar to the screenshot on this page.
Page of 168
comments powered by Disqus