If you want to achieve any special effects, this text is not suitable for you, but if you want to ext article, I think my humble little article is very suitable for you.
Another: This tutorial is based on the Ext2.2. This is not explained in many tutorials. That's confusing. I'm here to highlight
There are many tutorials on the internet, but the actual use is not very much, I would like to as a one weeks one weeks of summary to the friends on the network to bring help. I hope you will be useful. I will explain everything from every detail and try not to miss out on the basics as a beginner needs to know. The first time to write a tutorial, laughed.
Because I learned this is a process, through a control to understand other controls, the rest is the property search API. API myself in the translation of CHM version. Because it's a personal operation. So time is limited. Everyone forgive me.
Under Ext. The first contact must be grid. And so am I. I am because of grid and ext affinity.
Let's say the form of the Ext class.
Take grid as an example
JS Code
Copy Code code as follows:
var grid=new Ext.form.GridPanel ({
Here is the attribute.
});
var grid=new Ext.form.GridPanel ({
Here is the attribute.
});
This statement is very similar to Java's Object-oriented object. With the new keyword as an example of building a Gridpanel class, the basics of object-oriented are not here to start. It's just the object-oriented concept that is used when writing this summary. Personally feel the learning process, whether you learn Java or not. Think in Java must be read, if you want to learn better read English version. Because a sentence you can repeatedly try to figure out. Deepen the impression. I've only seen half of them think he plays a big part in a person's procedural thinking. Well, no topic.
Knowing OOP knows that there is a constructor inside the class that will initialize the property value within the constructor or invoke the method when the instance of the class is implemented.
However, the attribute assignment in ext is not "=" but ":".
It's theoretical, and it's actually the process.
var Grid = new Ext.form.GridPanel (); Instantiate an object of a class.
{} contains the initialization property values passed to this class. Because the core code I have not studied, also did not go to that part, so the specific how to transfer and implementation does not explain, in the future Ext learning experience will be explained.
Then expand the example above.
Java code
Copy Code code as follows:
var grid=new Ext.form.GridPanel ({
ID: ' List-account-panel ',
Ds:datastore,
CM:USERCM,
Sm:selectboxmodel,
Tbar:menubar,
Bbar:pagingbar,
Loadmask: {msg: Data Loading ... '},
Layout: ' Fit ',
Autoscroll:true
});
var grid=new Ext.form.GridPanel ({
ID: ' List-account-panel ',
Ds:datastore,
CM:USERCM,
Sm:selectboxmodel,
Tbar:menubar,
Bbar:pagingbar,
Loadmask: {msg: Data Loading ... '},
Layout: ' Fit ',
Autoscroll:true
});
These are commonly used properties that will be extended from here to the rest of the section.
This declares a power object and initializes it.
You understand the process, if you really understand it, as long as you're familiar with the API. Learn about the attributes of the component and the methods it defines, you can create any component you want. such as Gridpanel.panel,tree. In fact, the truth is Hutong. OK, this is the key to the basic part, the following is the attribute, interested can continue to see.
In some tutorials, a property of Ext2.2 is used here, which binds the control to the specified page element, but because of this el, the mind is anchored to the page element. In fact, sometimes you have to add the grid to the TabPanel. There is no need for El at this time. Sometimes create your own Gridpanel new class and inherit the Gridpanel class. Use the Ext.applyif method in the creation process to tell the new class that there are attributes in the original class that are copied. This way, when a new class is invoked, the delivery of the new class can pass a separate property value such as El. I have built a package for a class. Here's what I mean by the encapsulation of this extended class. Let's finish the basics of grid.
Take a look at the example above, ID, is the unique ID number of the EXT build, the ID number in the whole project to be as unique as possible, which makes it easier for you to identify the other problems. For example, an ID problem occurs when an HTML call to a TabPanel component is invoked.
DS, which is the set data source.
Examples of the specific code are as follows:
Java code
Copy Code code as follows:
Datastore = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({
URL: ' php/article_list.php ',
Disablecaching:false
}),
Reader:new Ext.data.JsonReader ({
Root: ' Results ',
Totalproperty: ' Total ',
ID: ' ID '
},[
{name: ' ID '},
{name: ' Name '},
{name: ' TypeName '},
{name: ' Time '},
])
});
This.dataStore.load ({params:{start:0, limit:this.myPageSize}});
Datastore = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({
URL: ' php/article_list.php ',
Disablecaching:false
}),
Reader:new Ext.data.JsonReader ({
Root: ' Results ',
Totalproperty: ' Total ',
ID: ' ID '
},[
{name: ' ID '},
{name: ' Name '},
{name: ' TypeName '},
{name: ' Time '},
])
});
This.dataStore.load ({params:{start:0, limit:this.myPageSize}}); Here are a lot of things to say.
Since the use of a Web site ext certainly will not be static, because I am most of the server interaction rather than directly read the XML file. So here I use the example of the server reading the data.
Proxy:new Ext.data.HttpProxy ({
URL: ' php/article_list.php ',
Disablecaching:false
})；
This is very simple ah. I can see it. Httpproxy This is a request to pass data to a local file. It's simple to understand. The core code is not studied, the specific operation process is not known. But as a class. Just know how to use it.
But here's a concept that uses anonymous functions. Can not say anonymous function bar ... How to say it ...
The Proxy property sends a request to a file in a form. A property assignment can be an instance name that has already been created, or it can be an anonymous instance that is new with the New keyword. I don't know if I can understand that.
The following property reader is the way to set the data read for this data source. This example is used for Jsonreader. You can also use Arreyreader. This looks at the specific needs. The property value can be an object or an anonymous instance object. It seems to be a method too. Never tried, just a thought.
Copy Code code as follows:
New Ext.data.JsonReader ({
Root: ' Results ',
Totalproperty: ' Total ',
ID: ' ID '
},[
{name: ' ID '},
{name: ' Name '},
{name: ' TypeName '},
{name: ' Time '},
])
Again, this part. This is a relatively concise and standard way of Jsonreader.
To explain the JSON data format first, this is important, I have a big flip on this, only know to use JSON data transfer, but do not know what format.
({"Total": "5", "Results": ["id": "]", "name": "Sampeng", "TypeName": "This is kind", "Time": "2008.02.02"]})
This is a return record. If it is more than one.
({"Total": "5", "Results": ["id": "", "Name": "Sampeng", "TypeName": "This is kind", "Time": "2008.02.02", {second},{third},{Fourth}]})
Can you see? Oh, do not understand that I also dozen more words. Sum up.
If you are building a JSON array to ext. Should be such a format.
{test: ' Test '}
This brace must be enlarged.
Before test, the Name property declared above is used as a marker symbol to tell Jsonreader how to truncate the data after it has been fetched.
I used PHP to write back the JSON data returned to my example above.
Echo $callback. ' {"Total": "'. $article _num.", "Results": '. Json_encode ($result _array);
Did you see it? I have to build the format of this JSON array, and the notation must be the same as on the Jsonreader.
That is, the value of total and results is set in this return. If the format is different, the data will not be read.
Look back at the root property, which is the JSON data format value after the binding results tag symbol. Properties that follow the Jsonreader
{name: ' ID '},
{name: ' Name '},
{name: ' TypeName '},
{name: ' Time '},
is to intercept the JSON array.
The final load. Because this is just a definition and is instantiated. Nothing has been done about it.
This is very well understood. Just like you do laundry, the clothes are still in the washing machine, but you do not open the switch, do not pick up the power, clothes will not be clean.
Because you created this Stroy data source, you can invoke his method on it. A method under Stroy is load. To load its data. That's when the laundry started. Oh ~
And then go back to the Gridpanel properties above
Cm:usercm
This is the column header for the set table. What the. You don't know what a column header is. You can wash and sleep.
Java code
var cm = new Ext.grid.ColumnModel ([
Selectboxmodel,
{header: ' article ordinal ', Dataindex: ' id ', tooltip: ' article number '},
{header: ' article title ', Dataindex: ' Name ', tooltip: ' Article name '},
{header: ' article type ', Dataindex: ' TypeName ', tooltip: ' Article category '},
{header: ' Modified ', Dataindex: ' Time ', tooltip: ' Modify Time '}
]);
Cm.defaultsortable = false;
var cm = new Ext.grid.ColumnModel ([
Selectboxmodel,
{header: ' article ordinal ', Dataindex: ' id ', tooltip: ' article number '},
{header: ' article title ', Dataindex: ' Name ', tooltip: ' Article name '},
{header: ' article type ', Dataindex: ' TypeName ', tooltip: ' Article category '},
{header: ' Modified ', Dataindex: ' Time ', tooltip: ' Modify Time '}
]);
Cm.defaultsortable = false; Don't want to say anything more. The only thing to note here: ToolTip is to turn on the mouse prompt. The other is no different from creating a new instance. New-> class name-> Constructor-> Property
Defaultsortable is whether the setting is sorted. I am setting the fake because my ext is not localized, sort that button down is an English one. So I set a fake. You can also set the column separately.
Tbar:menubar,
Bbar:pagingbar,
These two properties are used to set the header tool bar and the bottom toolbar. You can have buttons on the sidebar.
This is the bottom and top of the tool button. The instructions are written in the program code. I have the habit of writing a description.
Java code
var menubar = [{
<span style= "COLOR: #000000" >text: ' Add ',
ToolTip: ' Add a new article ', <span>//button reminder function </SPAN>
Iconcls: ' addItem ',//<span> icon pull. Read English all understand </SPAN>
Handler:function () {//<span>handler property is followed by a method that binds the event handling after you click the button </SPAN>
var Createwin = new SamPeng.account.Create ();//<span> I typed the file into a class package. So here you create the instance directly. </SPAN>
Createwin.show ();//<span> add page display, this method is to omit the El binding problem. </SPAN>
}
},'-',{
ID: ' Grid-edit-button ',
Text: ' Modify ',
ToolTip: ' Modify this article ',
Iconcls: ' EditItem ',
Disabled:true,
Handler:function () {
var record = ext.getcmp (' List-account-panel '). Getselectionmodel (). getselected ();
var Editwin = new SamPeng.Grid.Edit ({id:record.id});
Editwin.show ()//Modify interface display
}
},'-',{
ID: ' Grid-delete-button ',
Text: ' Delete ',
ToolTip: ' Delete selected articles ',
Iconcls: ' Remove ',
Disabled:true,
Handler:function () {
New SamPeng.Grid.DeleteItem ({panel: ' List-account-panel '});
}
}];
var pagingbar = new Ext.pagingtoolbar ({
PageSize:this.myPageSize,
Store:this.dataStore,
Displayinfo:true,
Displaymsg: ' Show {0} to {1} records, altogether {2} ',
Emptymsg: "No Data"
}); <SPAN> This is the bottom button, a pagination at the bottom. Uh.. Do not know how to explain, this I was written to the direct copy of others. Feel there is no need to change here. </SPAN></SPAN>
var menubar = [{
Text: ' Add ',
ToolTip: ' Add a new article ',//button reminder function
Iconcls: ' AddItem ',//icon pull. I can read English.
Handler:function () {//handler property is followed by a method that binds the event handling after you click the button
var Createwin = new SamPeng.account.Create ();//I'm going to type the file into a class package. So here you create the instance directly.
Createwin.show ()//Add page display, this method is omitted the El binding problem.
}
},'-',{
ID: ' Grid-edit-button ',
Text: ' Modify ',
ToolTip: ' Modify this article ',
Iconcls: ' EditItem ',
Disabled:true,
Handler:function () {
var record = ext.getcmp (' List-account-panel '). Getselectionmodel (). getselected ();
var Editwin = new SamPeng.Grid.Edit ({id:record.id});
Editwin.show ()//Modify interface display
}
},'-',{
ID: ' Grid-delete-button ',
Text: ' Delete ',
ToolTip: ' Delete selected articles ',
Iconcls: ' Remove ',
Disabled:true,
Handler:function () {
New SamPeng.Grid.DeleteItem ({panel: ' List-account-panel '});
}
}];
var pagingbar = new Ext.pagingtoolbar ({
PageSize:this.myPageSize,
Store:this.dataStore,
Displayinfo:true,
Displaymsg: ' Show {0} to {1} records, altogether {2} ',
Emptymsg: "No Data"
}); This is the bottom button, a pagination at the bottom. Uh.. Do not know how to explain, this I was written to the direct copy of others. Feel there is no need to change here. Ok. The basic part is finished ... The next article I'll explain is encapsulating it inside the class and being the new class that inherits the Gridpanel class.
Repeat the statement again. You can't get a complete example here, not me, but I think it's hurting you. What you need more is to check the API. Know the method format, check the API. The rest is not the completion of your program thought. Thank you for watching my tutorial. Thank you.
Very annoying fast-food tutorials, but I don't know into the cliché No. Oh. Hope to help you.
Reprinted by ... I know of those who have such a reprint. Even the practicality of the content does not look on the turn.
Reprint, please famous author: Sampeng. Thank you.
I do not want to teach you novice what advanced technology, because I am also in research, just want to teach you a thinking direction, can have extrapolate ability, can really learn ext and begin to understand deeply. If you want to achieve any special effects, this text is not for you, but if you want to study with me ext, I think my humble text is very suitable for you.
