Through the preliminary study of extjs, we will make a summary.
Use extjs to complete the requirement: Create an ext window when the page is loaded. There are two buttons in the window. When you click button 1, a normal window is displayed. When you click
When button 2 is displayed, a window is displayed, showing a tree.
Final Completion:
Implementation:
Ext-test1.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
Ext-test1.js
/** Note that the function method called here cannot be enclosed by brackets, because if brackets are added, the function will immediately execute and return the execution result to onready, therefore, the undefined */Ext. onready (showwindow2); function showwindow2 () {// create a window var win = new Ext. window ({// window title: "Ext", // window width: 300, // window height: 300, // Add two buttons: [{// text on the button: "Click me", // Click Event Handler: function () {// create a new ext window when you click the button. window ({Title: "normal window", width: 100, height: 100, // window content HTML: "<font color = 'red'> <B> I am a normal window </B> </font> "}). show () ;},{// here is the second button text: "Click create tree", Handler: function () {var win = new Ext. window ({Title: "tree window", width: 250, height: 250, HTML: Tree}); // Add the tree to the window. Win. add (tree); // display window win. show () ;}]}). show (); // create a tree var tree = new Ext. tree. treepanel ({// tree width: 200, // tree height: 200, // tree root node root: New Ext. tree. asynctreenode ({text: "Christmas tree", // child node of the tree-Children: [{text: "leaf node-1", // child node of the tree: [{text: "Sun Node 1", // The leaf configuration option indicates whether the node is displayed as a leaf node; true indicates that the node is a leaf node; false indicates that the node is not a leaf node leaf: true}]}, {// leaf node 2 Text of the tree: "Page child node 2", leaf: true}]});}The above example summarizes the use of windows and ext event-driven programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
