-
Getting Started
- Video Quick-Start Series
- Server Requirements
- Installation
- An Overview of MODX
- FAQs & Troubleshooting
-
Making Sites with MODx
- Structuring Your Site
- Tag Syntax
-
Customizing Content
-
Template Variables
- Creating a Template Variable
- Adding a Custom TV Type - MODX 2.2
- Bindings
- Template Variable Input Types
- Template Variable Output Types
- Adding a Custom TV Input Type
- Adding a Custom TV Output Type
- Creating a multi-select box for related pages in your template
- Accessing Template Variable Values via the API
- Properties and Property Sets
- Input and Output Filters (Output Modifiers)
-
Template Variables
- Commonly Used Template Tags
-
Administering Your Site
-
Settings
-
System Settings
- access_category_enabled
- date_timezone
- access_context_enabled
- access_resource_group_enabled
- allow_duplicate_alias
- allow_forward_across_contexts
- allow_multiple_emails
- allow_tags_in_post
- archive_with
- automatic_alias
- auto_check_pkg_updates
- auto_check_pkg_updates_cache_expire
- auto_menuindex
- base_help_url
- blocked_minutes
- cache_action_map
- cache_context_settings
- cache_db
- cache_db_expires
- cache_db_session
- cache_default
- cache_disabled
- cache_format
- cache_handler
- cache_json
- cache_json_expires
- cache_lang_js
- cache_lexicon_topics
- cache_noncore_lexicon_topics
- cache_resource
- cache_resource_expires
- cache_scripts
- cache_system_settings
- clear_cache_refresh_trees
- compress_css
- compress_js
- concat_js
- container_suffix
- cultureKey
- custom_resource_classes
- default_per_page
- default_template
- editor_css_path
- editor_css_selectors
- emailsender
- emailsubject
- enable_dragdrop
- error_page
- extension_packages
- failed_login_attempts
- feed_modx_news
- feed_modx_news_enabled
- feed_modx_security
- feed_modx_security_enabled
- fe_editor_lang
- filemanager_path
- filemanager_path_relative
- filemanager_url
- filemanager_url_relative
- forgot_login_email
- friendly_alias_lowercase_only
- forward_merge_excludes
- friendly_alias_max_length
- friendly_alias_restrict_chars
- friendly_alias_restrict_chars_pattern
- friendly_alias_strip_element_tags
- friendly_alias_translit
- friendly_alias_translit_class
- friendly_alias_translit_class_path
- friendly_alias_trim_chars
- friendly_alias_urls
- friendly_alias_word_delimiter
- friendly_alias_word_delimiters
- friendly_urls
- friendly_url_prefix
- friendly_url_suffix
- global_duplicate_uri_check
- hidemenu_default
- link_tag_scheme
- mail_charset
- mail_encoding
- mail_smtp_auth
- mail_smtp_helo
- mail_smtp_hosts
- mail_smtp_keepalive
- mail_smtp_pass
- mail_smtp_port
- mail_smtp_prefix
- mail_smtp_single_to
- mail_smtp_timeout
- mail_smtp_user
- mail_use_smtp
- manager_date_format
- manager_direction
- manager_favicon_url
- manager_language
- manager_lang_attribute
- manager_theme
- manager_time_format
- context_tree_sort
- context_tree_sortby
- context_tree_sortdir
- session_enabled
- modx_charset
- new_file_permissions
- new_folder_permissions
- password_generated_length
- password_min_length
- phpthumb_allow_src_above_docroot
- phpthumb_cache_maxage
- phpthumb_cache_maxfiles
- phpthumb_cache_maxsize
- phpthumb_cache_source_enabled
- phpthumb_document_root
- phpthumb_error_bgcolor
- phpthumb_error_fontsize
- phpthumb_error_textcolor
- phpthumb_far
- phpthumb_imagemagick_path
- phpthumb_nohotlink_enabled
- phpthumb_nohotlink_erase_image
- phpthumb_nohotlink_text_message
- phpthumb_nohotlink_valid_domains
- phpthumb_nooffsitelink_enabled
- phpthumb_nooffsitelink_erase_image
- phpthumb_nooffsitelink_require_refer
- phpthumb_nooffsitelink_text_message
- phpthumb_nooffsitelink_valid_domains
- phpthumb_nooffsitelink_watermark_src
- phpthumb_zoomcrop
- principal_targets
- proxy_auth_type
- proxy_host
- proxy_password
- proxy_port
- proxy_username
- publish_default
- rb_base_dir
- rb_base_url
- request_controller
- request_param_alias
- request_param_id
- resource_tree_node_name
- resource_tree_node_tooltip
- richtext_default
- search_default
- server_offset_time
- server_protocol
- session_cookie_domain
- session_cookie_lifetime
- session_cookie_path
- session_cookie_secure
- session_handler_class
- session_name
- settings_version
- signupemail_message
- site_name
- site_start
- site_status
- site_unavailable_message
- site_unavailable_page
- strip_image_paths
- symlink_merge_fields
- tree_default_sort
- tree_root_id
- tvs_below_content
- udperms_allowroot
- ui_debug_mode
- unauthorized_page
- upload_maxsize
- use_alias_path
- use_browser
- use_editor
- use_multibyte
- welcome_screen
- which_editor
- which_element_editor
- xhtml_urls
-
System Settings
- Using Friendly URLs
- Contexts
- Customizing the Manager
- MODX GitHub Integrator's Guide
- Security
- Installing a Package
- Upgrading MODX
- Moving Your Site to a New Server, or to Root from Subfolder
- Media Sources
- Dashboards
-
Settings
-
Developing in MODx
- Code Standards
- Overview of MODx Development
-
Basic Development
-
Plugins
-
System Events
- OnMODXInit
- OnBeforeCacheUpdate
- OnBeforeChunkFormDelete
- OnBeforeChunkFormSave
- OnBeforeDocFormDelete
- OnBeforeDocFormSave
- OnBeforeEmptyTrash
- OnBeforeManagerLogin
- OnBeforeManagerLogout
- OnBeforeManagerPageInit
- OnBeforePluginFormDelete
- OnBeforePluginFormSave
- OnBeforeSaveWebPageCache
- OnBeforeSnipFormDelete
- OnBeforeSnipFormSave
- OnBeforeTempFormDelete
- OnBeforeTempFormSave
- OnBeforeTVFormDelete
- OnBeforeTVFormSave
- OnBeforeUserActivate
- OnBeforeUserFormDelete
- OnBeforeUserFormSave
- OnBeforeWebLogin
- OnBeforeWebLogout
- OnCacheUpdate
- OnCategoryBeforeRemove
- OnCategoryBeforeSave
- OnCategoryRemove
- OnCategorySave
- OnChunkBeforeRemove
- OnChunkBeforeSave
- OnChunkFormDelete
- OnChunkFormPrerender
- OnChunkFormRender
- OnChunkFormSave
- OnChunkRemove
- OnChunkSave
- OnContextBeforeRemove
- OnContextBeforeSave
- OnContextFormPrerender
- OnContextFormRender
- OnContextRemove
- OnContextSave
- OnDocFormDelete
- OnDocFormPrerender
- OnDocFormRender
- OnDocFormSave
- OnDocPublished
- OnDocUnPublished
- OnEmptyTrash
- OnFileManagerUpload
- OnHandleRequest
- OnInitCulture
- OnLoadWebDocument
- OnLoadWebPageCache
- OnManagerAuthentication
- OnManagerLogin
- OnManagerLoginFormPrerender
- OnManagerLoginFormRender
- OnManagerLogout
- OnManagerPageAfterRender
- OnManagerPageBeforeRender
- OnManagerPageInit
- OnPageNotFound
- OnPageUnauthorized
- OnParseDocument
- OnPluginBeforeRemove
- OnPluginBeforeSave
- OnPluginEventRemove
- OnPluginFormDelete
- OnPluginFormPrerender
- OnPluginFormRender
- OnPluginFormSave
- OnPluginRemove
- OnPluginSave
- OnPropertySetBeforeRemove
- OnPropertySetBeforeSave
- OnPropertySetRemove
- OnPropertySetSave
- OnResourceGroupBeforeRemove
- OnResourceGroupBeforeSave
- OnResourceGroupRemove
- OnResourceGroupSave
- OnRichTextBrowserInit
- OnRichTextEditorInit
- OnRichTextEditorRegister
- OnSiteRefresh
- OnSiteSettingsRender
- OnTemplateVarBeforeRemove
- OnTemplateVarBeforeSave
- OnTemplateVarRemove
- OnTemplateVarSave
- OnUserActivate
- OnUserBeforeRemove
- OnUserBeforeSave
- OnUserChangePassword
- OnUserFormDelete
- OnUserFormSave
- OnUserNotFound
- OnUserRemove
- OnUserSave
- OnWebAuthentication
- OnWebLogin
- OnWebLogout
- OnWebPageComplete
- OnWebPageInit
- OnWebPagePrerender
-
System Events
- Snippets
- xPDO
-
Plugins
-
Advanced Development
- Caching
- Custom Manager Pages
- Custom Resource Classes
- Extending modUser
- From the Command Line (CLI)
- Internationalization
- MODx Services
- Namespaces
- Package Management
- Using runProcessor
- Validating Requests: Tokens and Nonces
- Developing RESTful APIs
-
Other Development Resources
- Summary of Legacy Code Removed in 2.1
- API Reference
-
Class Reference
- modResource
- modChunk
- modUser
-
modX
- modX.addEventListener
- modX.checkForLocks
- modX.checkSession
- modX.executeProcessor
- modX.getAuthenticatedUser
- modX.getCacheManager
- modX.getChildIds
- modX.getChunk
- modX.getConfig
- modX.getContext
- modX.getEventMap
- modX.getLoginUserID
- modX.getLoginUserName
- modX.getParentIds
- modX.getParser
- modX.getPlaceholder
- modX.getRegisteredClientScripts
- modX.getRegisteredClientStartupScripts
- modX.getRequest
- modX.getResponse
- modX.getService
- modX.getSessionState
- modX.getTree
- modX.getUser
- modX.getVersionData
- modX.handleRequest
- modX.hasPermission
- modX.initialize
- modX.invokeEvent
- modX.lexicon
- modX.makeUrl
- modX.parseChunk
- modX.regClientCSS
- modX.regClientHTMLBlock
- modX.regClientScript
- modX.regClientStartupHTMLBlock
- modX.regClientStartupScript
- modX.reloadConfig
- modX.removeAllEventListener
- modX.removeEventListener
- modX.runProcessor
- modX.runSnippet
- modX.sendError
- modX.sendErrorPage
- modX.sendForward
- modX.sendRedirect
- modX.sendUnauthorizedPage
- modX.setDebug
- modX.setPlaceholder
- modX.setPlaceholders
- modX.switchContext
- modX.toPlaceholder
- modX.toPlaceholders
- modX.unsetPlaceholder
- modX.unsetPlaceholders
- Loading MODx Externally
- Reserved Parameters
-
Case Studies and Tutorials
- Developing an Extra in MODX Revolution
- Developing an Extra in MODX Revolution - MODX 2.1 and Earlier
- PHP Coding in MODx Revolution, Pt. I
- Using Custom Database Tables in your 3rd Party Components
- Creating a Blog in MODx Revolution
- Loading Pages in the Front-End via AJAX and jQuery Tabs
- Reverse Engineer xPDO Classes from Existing Database Table
- Integrating a Template into MODX Tutorial
- Quick and Easy MODX Tutorials
- Adding Custom Fields to Manager Forms
- Create a Multilingual Website with migxMultiLang
- Managing Resources and Elements via SVN
- MODX Community Information
-
Getting Started
5. Ext JS Tutorial - Panels
In this tutorial, we're going to see a bit more what Ext JS is all about by introducing panels. Panels can fill regions of the screen, and they are used as one of the building blocks when constructing applications or the MODX manager.
As always, we need to load up our trusty CSS and Javascript so that MODExt can work its magic:
<link rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" /> <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
Simple Panel
<html> <title>Ext JS Panels</title> <link rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" /> <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { var myPanel = new Ext.Panel({ renderTo : document.body, height : 50, width : 150, title : 'Simple Panel', html : 'This is my content', frame : true }); }); </script> <body> <h1>Panels</h1> <div id="target_div"></div> </body> </html>
RTFM
We'll point you once again to Sencha's original Ext JS documents. Remember that MODExt extends Ext JS version 3, so you'll want to refer to the appropriate source:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel
Take note of the various attributes that are available to the Panel object.
- 1. Ext JS Tutorial - Message Boxes
- 2. Ext JS Tutorial - Ajax Include
- 3. Ext JS Tutorial - Animation
- 4. Ext JS Tutorial - Manipulating Nodes
- 5. Ext JS Tutorial - Panels
- 7. Ext JS Tutoral - Advanced Grid
- 8. Ext JS Tutorial - Inside a CMP
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).