Extjs review your notes (c)
Advertisements
Ext.onReady(function(){ //onReady Represents the page load time running inside of a function
var _button = new Ext.Button({
renderTo:document.body, // Or Ext.getBody()
text:" Determine ",
minWidth:100
}) ;
}) ;
renderTo: the HTML generated by the current object into the specified target object store.
2, to join the elements with function response
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:" Determine ",
listeners:{ // Add an event listener
"click":function(){ // For the click event of the Add response
alert(" Welcome to lingyun harboring blog !") ;
}
}
}) ;
}) ;
Can also be new, and then behind the increase in incident response
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(),
text:" Determine "
}) ;
_btn.on("click" , function(){
alert(" Welcome to lingyun harboring blog !") ;
}) ;
}) ;
3, with the realization of the event handler to add
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:" Determine ",
handler:function(){
alert(" Welcome to lingyun harboring blog !") ;
}
}) ;
}) ;
With the listener and you can add event handler methods, the main difference is:
handler: specify a function handle, call the default event is triggered, then the default event for the click
listener: This is before the object is initialized, it will be to define a series of events means for programming during the assembly, especially useful.
4, add the text box: Ext.form.TextField
new Ext.form.TextField({
renderTo:Ext.getBody(),
fieldLabel:" Name "
}) ;
5, Panel:
The following text box to try to go inside Panel
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:"form",
labelWidth:30,
listeners:{
"render":function(_panel){ // When binding the event when triggered, equivalent to directly add
_panel.add(new Ext.form.TextField({
id:"txt_name",
fieldLabel:" Name "
})) ;
}
}}) ;
Which has a layout attribute is used to layout. Mainly has the following:
-
absolute -
accordion -
anchor -
autoDefault -
border -
card -
column -
fit -
form -
hbox -
menu -
table -
toolbar -
vbox - Individual can go check Extjs the API, this is mainly about form layout:
Official document explains:
This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of Fields. This layout manager is used when a Container is configured with the layout:'form' layout config option, and should generally not need to be created directly via the new keyword. See Ext.Container.layout for additional details. In an application, it will usually be preferrable to use a FormPanel (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for loading, validating and submitting the form.
In fact, this layout can also write:
layout: { type: 'vbox', padding: '5', align: 'left' }
Use the vbox layout
6, a complete little example:
Ext.onReady(function(){ var _panel = new Ext.Panel({ renderTo:Ext.getBody(), layout:"form", labelWidth:30, title:"TestPanel", listeners:{ "render":function(_panel){ // In the render time generated text box , Equivalent to directly add _panel.add(new Ext.form.TextField({ id:"txt_name", fieldLabel:" Name " })) ; } }}) ; new Ext.Button({ text:" Determine ", renderTo:Ext.getBody(), handler:function(){ // Get the current page of a text box . alert(Ext.getCmp("txt_name").getValue()) ; } }) ; }) ;
And above there is a similar method Ext.getCmp Ext.getDom.
Official explanation: the former is Looks up an existing Component by ID , returns The Component, <tt> undefined </ tt> if not found, or <tt> null </ tt> if a Class was found.
The latter is Return the dom node for the passed String (id), dom node, or Ext.Element.
Optional 'strict' flag is needed for IE since it can return 'name' and 'id' elements by using getElementById. Here are some examples:
// gets dom node based on id var elDom = Ext.getDom('elId'); // gets dom node based on the dom node var elDom1 = Ext.getDom(elDom); // If we don't know if we are working with an // Ext.Element or a dom node use Ext.getDom function(el){ var dom = Ext.getDom(el); // do something with the dom node }
Note: the dom node to be found actually needs to exist (be rendered, etc) when this method is called to be successful.
Returns a HTMLElement.
Related Posts of Extjs review your notes (c)
-
js add div
1. Add div Do not mean to add div, add other elements to pass through this way <html> <script language="javascript"> i=1; /*Add a div */ function add(){ //Create a div var my = document.createElement("div"); //Added to the page document.body.a
-
Firebug Guide (b) --- how to use the Firebug command line API to provide debugging js procedures (on)
Console Tab Overview This tag is mainly used to print the log only. It can also be a time when debugging in javascript as a command-line window to use (similar to Microsoft Visual Studio in the window immediately (immediate window)). And the use of its
-
xKungfoo on the Net indecent horse skills
XKungfoo today the last day, G in the above linked to make a horse industry chain issues. Some hang indecent horse skills did not say in detail, where the open bar. In fact, some not, that is, skills, and some people have played. The first in a horse hang
-
js a small script
Removal of elements:
-
javascript basic object-oriented technology (iv)
Category, constructor, prototype First to illustrate the point: In the above mentioned elements, each a function contains a prototype property, this property points to a prototype object (Every function has a prototype property that refers to a prede ...
-
js Object onclick give dynamic case assignment, dynamic mass parameters
We first take a look at examples of errors To implement the code above is wrong, because show (certid.value) This direct method on the implementation of the show, but not the correct way to put this case the object is assigned to btn.onclick. If we c ...
-
js Simplified Traditional conversion code
js Traditional Traditional Traditional Traditional javascript code conversion conversion code Reprint Address: http://www.cnblogs.com/genson/archive/2008/04/16/1004632.html js Simplified, Traditional conversion, IE7 through, Firefox does not pass, the pos
-
javascript form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>formUtil.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="thi
-
js version of Ant Colony Algorithm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb
-
javascript built-in functions Info
48. In the old browsers do not perform this JS :<!-- //--> 49. To quote a document-style JS: <script type="text/javascript" src="/blog/aaa.js"> </ script> 50. Specified in the script does not support the browser displ