|
|
Ext.panel Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
AbstractPanel
|
A base class which provides methods common to Panel classes across the Sencha product range. Please refer to sub class's documentation
|
|
|
AbstractPanelConfig
|
|
|
|
AbstractPanelEvents
|
|
|
|
Header
|
Simple header class which is used for on Ext.panel.Panel and Ext.window.Window
|
|
|
HeaderConfig
|
|
|
|
HeaderEvents
|
|
|
|
Panel
|
Panel is a container that has specific functionality and structural components that make
it the perfect building block for application-oriented user interfaces. Panels are, by virtue of their inheritance from Ext.container.Container, capable
of being configured with a layout, and containing child Components. When either specifying child items of a Panel, or dynamically adding Components
to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
those child elements need to be sized using one of Ext's built-in layout schemes. By
default, Panels use the Auto scheme. This simply renders
child components, appending them one after the other inside the Container, and does not apply any sizing
at all. A Panel may also contain bottom and top toolbars, along with separate
header, footer and body sections (see frame for additional
information). Panel also provides built-in collapsible, expandable and closable behavior.
Panels can be easily dropped into any Container or layout, and the
layout and rendering pipeline is completely managed by the framework. Note: By default, the close header tool destroys the Panel resulting in removal of the Panel
and the destruction of any descendant Components. This makes the Panel object, and all its descendants unusable. To enable the close
tool to simply hide a Panel for later re-use, configure the Panel with closeAction: 'hide'. Usually, Panels are used as constituents within an application, in which case, they would be used as child items of Containers,
and would themselves use Ext.Components as child items. However to illustrate simply rendering a Panel into the document,
here's how to do it:
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: document.body
});
A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a constituent part of a Container:
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}]
});
Note that the Panel above is not configured to render into the document, nor is it configured with a size or position. In a real world scenario,
the Container into which the Panel is added will use a layout to render, size and position its child Components. Panels will often use specific layouts to provide an application with shape and structure by containing and arranging child
Components:
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: document.body,
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [{header: 'Column One'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}, {
xtype: 'splitter' // A splitter between the two child items
}, { // Details Panel specified as a config object (no xtype defaults to 'panel').
title: 'Details',
bodyPadding: 5,
items: [{
fieldLabel: 'Data item',
xtype: 'textfield'
}], // An array of form fields
flex: 2 // Use 2/3 of Container's height (hint to Box layout)
}]
});
The example illustrates one possible method of displaying search results. The Panel contains a grid with the resulting data arranged
in rows. Each selected row may be displayed in detail in the Panel below. The vbox layout is used
to arrange the two vertically. It is configured to stretch child items horizontally to full width. Child items may either be configured
with a numeric height, or with a flex value to distribute available space proportionately. This Panel itself may be a child item of, for exaple, a Ext.tab.Panel which will size its child items to fit within its
content area. Using these techniques, as long as the layout is chosen and configured correctly, an application may have any level of
nested containment, all dynamically sized according to configuration, the user's preference and available browser size.
|
|
|
PanelConfig
|
|
|
|
PanelEvents
|
|
|
|
Proxy
|
A custom drag proxy implementation specific to Ext.panel.Panels. This class
is primarily used internally for the Panel's drag drop implementation, and
should never need to be created directly.
|
|
|
ProxyConfig
|
|
|
|
ProxyEvents
|
|
|
|
Table
|
TablePanel is the basis of both TreePanel and GridPanel. TablePanel aggregates: a Selection Model a View a Store Scrollers Ext.grid.header.Container
|
|
|
TableConfig
|
|
|
|
TableEvents
|
|
|
|
Tool
|
This class is used to display small visual icons in the header of a panel. There are a set of
25 icons that can be specified by using the type config. The handler config
can be used to provide a function that will respond to any click events. In general, this class
will not be instantiated directly, rather it will be created by specifying the Ext.panel.Panel.tools
configuration on the Panel itself. Example Usage Ext.create('Ext.panel.Panel', {
width: 200,
height: 200,
renderTo: document.body,
title: 'A Panel',
tools: [{
type: 'help',
handler: function(){
// show help here
}
}, {
itemId: 'refresh',
type: 'refresh',
hidden: true,
handler: function(){
// do refresh
}
}, {
type: 'search',
handler: function(event, target, owner, tool){
// do search
owner.child('#refresh').show();
}
}]
});
|
|
|
ToolConfig
|
|
|
|
ToolEvents
|
|
|
SharpKit.AspNetAjax
Ext