Build features using Sencha/ExtJS

Creating Portlets using ExtJS

File Structure

Portlet Frame: 

/packages/[PACKAGE_NAME]/tcl/[PACKAGE_NAME]-procs.tcl

Example: 

/packages/intranet-customer-portal/tcl/intranet-customer-portal-procs.tcl

ad_proc -public im_list_rfqs_component {} {
    Returns a component that list all current RFQ together with their status
    and action options, such as "Accept/Deny Quote".

} {
    set user_id [ad_get_user_id]
    set html_output "<div id='gridRFQ'></div><br>"

    append html_output "<script language='javascript'>"
    append html_output [ad_parse_template "/packages/intranet-customer-portal/www/resources/js/rfq-list.js"]
    append html_output "</script>"

    return $html_output
}

• This file only contains the frame
  
• JS code is swaped out to another file to facilitate char encoding 
• Each component should have its own 'namespace'
  

/packages/intranet-customer-portal/www/resources/js/rfq-list.js.adp 

­
// General Settings

Ext.Loader.setConfig({
    enabled: true
});

// set local blank image
Ext.BLANK_IMAGE_URL = '/intranet/images/cleardot.gif';

Ext.require([
    'Ext.form.field.File',
    'Ext.form.Panel',
    'Ext.window.MessageBox',
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*'
]);

// create namespace
Ext.namespace('RFQPortlet');

RFQPortlet.app = function() {


   return {
    // public properties, e.g. strings to translate

    // public methods
    init: function() {

        // ************** Grid Inquiries:  *** //

        Ext.define('listRFQ', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'id', type: 'number'},
                {name: 'inquiry_id', type: 'string'},
                {name: 'title', type: 'string'},
                {name: 'inquiry_date',  type: 'date', dateFormat: 'Y-m-d'},
                {name: 'status_id',  type: 'string'},
                {name: 'company_name', type: 'string'},
                {name: 'cost_name', type: 'string'},
                {name: 'amount', type: 'string'},
                {name: 'currency', type: 'string'},
                {name: 'action_column', type: 'string'},
                {name: 'project_id', type: 'number'}
            ]
        });

   ...

   } // end of init
  };
}(); // end of app;

Ext.onReady(RFQPortlet.app.init, RFQPortlet.app);

...
 

Naming Conventions 

• ]po[ files:  
  
• Data Store:
• Data Model: