I modified it to do sencha way. The URL gets truncated, so instead of it being ". Any ideas why? Last edited by Maxeta; 22 Oct at AM. Reason: Update. My "Extification": Code:. Originally Posted by Maxeta. Hi, I am getting the following error when I am clicking the button 2nd time, I have a handler function for a click event which sends the form data in hidden iframe. Does anyone know what changes should I do in my code to get rid of this error? Make sure to clean up Element instances using destroy Code:.
Direct Ext: 4. Tags for this Thread extjs 4. Stencils — enables developers to quickly and easily mock up, style, prototype, and evaluate interface designs. Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS.
Sencha Test helps developers and test automation engineers to: Improve the quality of your apps through end-to-end testing. Leverage unit and functional testing for Ext JS apps to increase team productivity and accelerate release cycles. Ext JS includes a flexible layout manager to help organize the display of data and content across multiple browsers, devices, and screen sizes.
It helps you to control the display of components, even for the most complex user interfaces. Ext JS also provides a responsive config system that allows application components to adapt to specific device orientation landscape or portrait or available browser window size. Using the ARIA package, you can create apps that can be used by people who need assistive technologies such as screen readers to navigate the web.
Data Package. The data package: Allows client-side collections of data using highly functional models that offer features such as sorting and filtering. Is protocol agnostic, and can consume data from any back-end source. Comes with session management capabilities that allow several client-side operations, minimizing round-trips to the server. Sencha Architect Build Ext JS applications using drag-and-drop features and spend less time on manual coding.
Sencha Themer Design customized application themes using graphical tools — without writing code. ExtGen ExtGen is a node based cross-platform command line tool that provides multiple modes for application generation. Sencha Fiddle Sencha Fiddle is a free tool that allows you to try Ext JS code in your browser without downloading or installing anything. You must use a HTML5 doctype for docked bottom to work.
To do this, simply add the following code to the HTML file:. Set to true to allow this component to be dragged. This can also be the config object for the Ext. Source that will manage the drag. Animation effect to apply when the Component is being shown. Typically you want to use an inbound animation type such as 'fadeIn' or 'slideIn'. Deprecated since version 2. A map of event type to the corresponding handler method name. This is used internally by native event handling mechanism.
Typically you want to use an outbound animation type such as 'fadeOut' or 'slideOut'. The flex of this item if this item item is inside a Ext. HBox or Ext. VBox layout. You can also update the flex of a component dynamically using the Ext. FlexBox setItemFlex method. When supplied as a string or number this option supports the same syntax as CSS flex.
For example:. The default flex-shrink value for box layout items is set to 0 in the stylesheet, which is different from the browser's default flex-shrink value of 1. This accommodates the majority use case for applications since where non-flexed components are typically not expected to shrink smaller than their default size. For convenience when only a single number is supplied it is used as the value for both flex-grow and flex-shrink , for example flex: 3 is the same as flex: '3 3'.
When the object form is supplied shrink always defaults to 0 regardless of the value of grow. A Component may be floated above all other components in the application. This means that the component is absolutely positioned, and will move to the front and occlude other sibling floated component if clicked. A Floated component may have floated descendants.
It will bring these decendants to the front with it when brought to the front of its sibling floated components. By default, descendant floated components are all positioned using the viewport coordinate system. To make a floating component a positioning parent for descendants, and have the ancestors positioned relatively, configure the parent floated component with cfg-relative : true.
CSS class that will be added to focused component's focusClsEl , and removed when component blurs. The height of this Component; must be a valid CSS length value, e. By default, if this is not explicitly set, this Component's element will simply have its own natural size.
If set to auto , it will set the width to null meaning it will have its own natural size. Whether or not this Component is hidden its CSS display property is set to none. Animation effect to apply when the Component is being hidden. For more animations, check the Ext.
Animation type config. A String which specifies how this component's DOM element will be hidden. The accepted values are any of these:. Hiding using display results in having no dimensions as well as resetting scroll positions to 0. When using a modal Component, setting this to true will hide the modal mask and the Container when the mask is tapped on.
One or more space separated CSS classes to be applied to the icon element. The CSS rule s applied should specify a background image to be used as the icon. In addition to specifying your own classes, you can use the font icons provided in the SDK using the following syntax:. Depending on the theme you're using, you may need include the font icon packages in your application in order to use the icons included in the SDK.
For more information see:. It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext. Instead of using assigned ids, use the itemId config, and Ext. The Ext. Container class contains shortcut methods to query its descendant Components by selector. Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component.
This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent. Note : to avoid complications imposed by a unique id also see itemId.
An extra CSS class or classes to augment the classCls on an individual instance. An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext getCmp , use itemId with Ext. Container getComponent which will retrieve itemId 's or id 's. Since itemId 's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container - avoiding potential conflicts with Ext.
ComponentManager which requires a unique id. Also see id , Ext. Container query , Ext. Container down and Ext. Container child. An object containing handlers for keyboard events. The property names of this object are the key name and any modifiers. The values of the properties are the descriptors of how to handle each event. The handler descriptor can be simply the handler function either the literal function or the method name , or it can be an object with these properties:. Important: Calls to setKeyMap do not replace the entire keyMap but instead update the provided mappings.
That is, unless null is passed as the value of the keyMap which will clear the keyMap of all entries. The default scope to apply to key handlers which do not specify a scope. This is processed the same way as the scope of cfg-listeners.
It defaults to the "controller" , but using 'this' means that an instance method will be used. Enables or disables processing keys in the keyMap. This value starts as null and if it is null when initKeyMap is called, it will automatically be set to true. Since initKeyMap is called by Ext. Component at the proper time, this is not something application code normally handles. This is intended to be controlled at the class level not per instance. The absolute left position of this Component; must be a valid CSS length value, e.
A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. For example the DataView 's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:.
An alias for addListener. In versions prior to 5. The preferred way of adding listeners is to use the on method. The margin to use on this Component. Can be specified as a number in which case all edges get the same margin or a CSS string like '5 10 10 10'. The maximum height of this Component; must be a valid CSS length value, e. Note that this config will not apply if the Component is 'positioned' absolutely positioned or centered.
The maximum width of this Component; must be a valid CSS length value, e. A menu or menu configuration. This can be a reference to a menu instance, a menu config object or the xtype alias of a Ext.
Menu -derived class. The position to align the menu to see Ext. Positionable alignTo for more details. The minimum height of this Component; must be a valid CSS length value, e. The minimum width of this Component; must be a valid CSS length value, e. This will create a mask underneath the Component that covers its parent and does not allow the user to interact with any other Components until this Component is dismissed.
This config enables binding to your Ext. Model validators. This is only processed by form fields e. While this config can be set arbitrarily high in the component hierarchy, doing so can create a lot overhead if most of your form fields do not actually rely on validators in your data model. Using this setting for a form that is bound to an Ext. Model might look like this:. Name for the widget to be used with Ext. Container lookupName et al. Set to true for this component's name property to be tracked by its containing nameHolder.
The padding to use on this Component. Can be specified as a number in which case all edges get the same padding or a CSS string like '5 10 10 10'. This config describes one or more plugin config objects used to create plugin instances for this component. Plugins are a way to bundle and reuse custom functionality. Plugins should extend Ext. Abstract but technically the only requirement for a valid plugin is that it contain an init method that accepts a reference to its owner.
Once a plugin is created, the owner will call the init method, passing a reference to itself. Each plugin can then call methods or respond to events on its owner as needed to provide its functionality. The value can be a single string with the plugin's Ext. Plugin :. In the above examples, the string "listpaging" is the type alias for Ext. The full alias includes the "plugin. The preferred form for multiple plugins or to configure plugins is the keyed-object form new in version 6.
The object keys are the id 's as well as the default type alias. This form allows the value of the plugins to be merged from base class to derived class and finally with the instance configuration.
This allows classes to define a set of plugins that derived classes or instantiators can further configure or disable. This merge behavior is a feature of the config. The plugins config can also be an array of plugin aliases arrays are not merged so this form does not respect plugins defined by the class author :.
An array can also contain elements that are config objects with a type property holding the type alias:. The amount of delay between the mousedown or touchstart and the moment the button receives "pressed" styling.
Settings this to true defaults to ms. One or more names of config properties that this component should publish to its ViewModel. Generally speaking, only properties defined in a class config block including ancestor config blocks and mixins are eligible for publishing to the viewModel. Some components override this and publish their most useful configs by default. Note: We'll discuss publishing properties not found in the config block below.
Values determined to be invalid by component often form fields and model validations will not be published to the ViewModel. This config uses the cfg-reference to determine the name of the data object to place in the ViewModel. If reference is not set then this config is ignored. By using this config and cfg-reference you can bind configs between components. For instances this value can be specified as a value as show above or an array or object as follows:.
In some cases, users may want to publish a property to the viewModel that is not found in a class config block. In these situations, you may utilize publishState if the property has a setter method. Let's use setFieldLabel as an example:.
Defaults to: [ 'pressed' ]. A model instance which updates the Component's html based on it's tpl. Similar to the data configuration, but tied to to a record to make allow dynamic updates. This must be a model instance and not a configuration of one.
Specifies a name for this component inside its component hierarchy. This name must be unique within its view or its Ext. See the documentation in Ext. Container for more information about references. Note : Valid identifiers start with a letter or underscore and are followed by zero or more additional letters, underscores or digits. References are case sensitive. Configure this as true if you require descendant floated components to be positioned relative to this component's coordinate space, not the viewport's coordinate space.
Note: The coordinate space is this Component's encapsulating element's area. Not that of the inner element in which static child items are rendered by the layout. Optional element to render this Component to. Not required if this component is an item of a Container of a Container. The absolute right position of this Component; must be a valid CSS length value, e. Position for the ripple to start at [x,y]. Determines if a Ripple effect should happen whenever this element is pressed. For complex components, individual elements can suppress ripples by adding the x-no-ripple class to disable rippling for a tree of elements.
The scope this refeence in which the configured handler will be executed, unless the scope is a ViewController method nmame. Also accepts a configuration object for a Ext. Scroller if if advanced configuration is needed. The getter for this config returns the Ext.
Scroller instance. You can use the Scroller API to read or manipulate the scroll position:. If provided this creates a new Session instance for this component. If this is a Container , this will then be inherited by all child components. Configure as true for the component to have a drop shadow.
By default the theme will determine the presence of a shadow. Set to true to allow this component's name to be shared by other items in the same nameHolder. Such items will be returned in an array from lookupName. Configure as true if the cfg of this button's.
An minWidth explicit minWidth on the menu will override this. Additional CSS styles that will be rendered into an inline style attribute when the widget is rendered. Although the object syntax is much easier to read, we suggest you to use the string syntax for better performance. Set the tabIndex property for this Focusable. If the focusEl is available, set tabIndex attribute on it, too. True to automatically call toFront when a cfg-floated Component is shown.
This Button's new pressed state. The handler function to run when the Button is toggled. Supplying this configuration implies enableToggle is true.
The tooltip for this component - can be a string to be used as innerHTML html tags are accepted or Ext. ToolTip config object. The default behavior is to use a shared tip instance. The tooltip configuration is registered with the Ext. To enable this, your application can set the Ext. Application quickTips config, or an instance of the Ext.
Manager may be created manually. To force a unique tooltip instance to be created, specify autoCreate: true on this configuration. Configuring this with autoHide: false implies autoCreate: true so that the desired persistent behavior can be obtained with other targets still showing the singleton instance. The absolute top position of this Component; must be a valid CSS length value, e. Emulates the behavior of the CSS touch-action property in a cross-browser compatible manner.
Keys in this object are touch action names, and values are false to disable a touch action or true to enable it. Accepted keys are:. All touch actions are enabled true by default, so it is usually only necessary to specify which touch actions to disable. For example, the following disables only horizontal scrolling and pinch-to-zoom on the component's main element:.
Touch actions can be specified on reference elements using the reference element name, for example:. The primary motivation for setting the touch-action of an element is to prevent the browser's default handling of a gesture such as pinch-to-zoom, or drag-to-scroll, so that the application can implement its own handling of that gesture on the element.
Suppose, for example, a component has a custom drag handler on its element and wishes to prevent horizontal scrolling of its container while it is being dragged:. A String , Ext. Template , Ext.
XTemplate or an Array of strings to form an Ext. Used in conjunction with the data and tplWriteMode configurations. Note The data configuration must be set for any content to be shown in the component when using this configuration.
This object holds a map of config properties that will update their binding as they are modified using a config's setter method. For example, value is a key added by form fields whose changes are published to the View Model using the form fields' setValue method. The form of this config is the same as publishes.
This config is defined so that updaters are not created and added for all bound properties since most cannot be modified by the end-user and hence are not appropriate for two-way binding. Note: Setting a bind expression with the option twoWay : false overrides twoWayBindable. You can also append -round to each of the last three UI's to give it a round shape:. One or more CSS classes to add to the component's primary element.
This config is intended solely for use by the component instantiator the "user" , not by derived classes. Can also be any valid value for the CSS3 user-select property. Applications may want to enable user selection for specific DOM elements, such as the bodyElement of a component used as a tab panel.
The tab and tab text would not be user selectable in this example, but the content area when the tab is selected would. The ViewModel is a data provider for this component and its children.
The data contained in the ViewModel is typically used by adding bind configs to the components that want present or edit this data. When set, the ViewModel is created and links to any inherited viewModel instance from an ancestor container as the "parent". The ViewModel hierarchy, once established, only supports creation or destruction of children. The parent of a ViewModel cannot be changed on the fly. If this is a root-level ViewModel , the data model connection is made to this component's associated Ext.
This is determined by calling getInheritedSession. This value controls this item's order in a weighted Ext. Container see parent.
Lower values gravitate towards the start of the container - the top in vertical layouts, the locale start side in horizontal layouts. The width of this Component; must be a valid CSS length value, e. The x position at which to position this component. This is usually viewport-relative. But if there is a relative : true ancestor, it will be relative to that. The xtype configuration option can be used to optimize Component creation and rendering.
It serves as a shortcut to the full component name. For example, the component Ext. Button has an xtype of button. You can define your own xtype on a custom Ext.
Component by specifying the alias config option with a prefix of widget. Any Component can be created implicitly as an object config with an xtype specified, allowing it to be declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources until they are actually needed.
In complex, nested layouts containing many Components, this can make a noticeable improvement in performance. In the first example, the button will always be created immediately during the panel's initialization. With many added Components, this approach could potentially slow the rendering of the page.
In the second example, the button will not be created or rendered until the panel is actually displayed in the browser. If the panel is never displayed for example, if it is a tab that remains hidden then the button will never be created and will never consume any resources whatsoever. Not valid for cfg-floated Components. A value of false stores config values as properties using their exact name no prefix.
The value true instructs the initConfig method to only honor values for properties declared in the config block of a class. When false , properties that are not declared in a config block will be placed on the instance. Matches options property names within a listeners specification object - property names which are never used as event names. We don't want the base destructor to clear the prototype because our destroyObservable handler must be called the very last.
It will take care of the prototype after completing Observable destruction sequence. This property will be replaced with the actual Element reference after rendering. This object is only used during rendering, and is discarded afterwards. ARIA role for this Component, defaults to no role. With no role, no other ARIA attributes are set. The base CSS class to apply to this widget's element. Used as the prefix for ui -specific class names. Defaults to: Ext.
A CSS class to apply to the main element that will be inherited down the class hierarchy. Subclasses may override this property on their prototype to add their own CSS class in addition to the CSS classes inherited from ancestor classes via the prototype chain.
For example. When set to true during widget class definition, that class will be the "root" for classCls inheritance. Derived classes may set this to true to avoid inheriting a classCls from their superclass. Setting this property to false will prevent nulling object references on a Class instance after destruction.
Setting this to "async" will delay the clearing for approx 50ms. Setting this property to true will result in setting the object's prototype to null after the destruction sequence is fully completed. After that, most attempts at calling methods on the object instance will result in "method not defined" exception.
This can be very helpful with tracking down otherwise hard to find bugs like runaway Ajax requests, timed functions not cleared on destruction, etc. Note that this option can only work in browsers that support Object. This property is set separately from hasFocus , and can be true when hasFocus is false.
Text field with input element focused would be: focusable: true, hasFocus: true, containsFocus: true. Date field with drop-down picker currently focused would be: focusable: true, hasFocus: false, containsFocus: true. Form Panel with a child input field currently focused would be: focusable: false, hasFocus: false, containsFocus: true. This property is used to determine the property of a bind config that is just the value.
The defaultBindProperty is set to "value" for form fields and to "store" for grids and trees. This property is set to true after the destroy method is called. A configuration object for Ext.
0コメント