If you want to achieve special effects, this article is not suitable for you, but if you want an Ext article, I think my article is very suitable for you.
Another: This tutorial is based on Ext2.2. Many tutorials don't explain this. Very confusing. I would like to make a special note here
There are many tutorials on the Internet, but not many are actually used. I want to summarize them week by week to help all my friends on the Internet. Hope it's useful to you. I will explain every detail and try not to miss the basics you need to know as a beginner. This is my first time writing a tutorial, so funny.
Because the process for me to learn this is to understand other controls through one control, and the rest is to check the properties of the API. I am translating the CHM version of the API myself. Because it is a personal operation. So time is limited. . Please forgive me.
Under Ext. The first thing you come into contact with must be Grid. So am I. I got connected with Ext because of Grid.
Let’s first talk about the declaration form of the Ext class.
Take Grid as an example
Js code
var grid=new Ext.form.GridPanel({
Here are the properties.
});
var grid=new Ext.form.GridPanel({
Here are the properties.
}) ;
This declaration is very similar to Java's object-oriented declaration. Using the new keyword as an instance of the GridPanel class, the basic knowledge about object-oriented will not be expanded here. It's just that the object-oriented concept is often used when writing this summary. Personally, I feel that learning programming does not matter whether you learn Java or not. You must read think in java. If you want to learn well, it is best to read the English version. Because you can ponder a sentence over and over again. deepen the impression. I have only seen half of it and I feel that it plays a big role in a person's procedural thinking. Okay, let’s not go off topic.
Everyone who knows OOP knows that there is a constructor in a class. When implementing an instance of the class, the attribute values in this constructor will be initialized or the method will be called.
But the attribute assignment in Ext is not "=" but ":".
What I said above is theoretical, but this is actually the process.
var grid = new Ext.form.GridPanel(); Instantiate an object of a class.
{} contains the initialization attribute values passed to this class. Because I haven't studied the core code yet, and I haven't reached that level yet, so I won't explain how to deliver and implement it specifically. I will explain it in the future Ext learning experience.
Extend the above example.
Java code
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 It is a commonly used attribute and will be expanded from here to other parts.
This declares a strength object and initializes it.
You understand this process. If you really understand it, as long as you are familiar with the API and understand the properties of the component and its defined methods, you can create any component you want. Such as GridPanel.Panel,Tree. In fact, the principle is alley. Okay, let’s finish this key basic part, and the following is the attributes. If you are interested, you can continue to read.
In some tutorials, an attribute el of Ext2.2 is used here. This attribute is used to bind the control to the specified page element. However, because of this el, everyone’s thinking is fixed on binding only. in the page element. In fact, sometimes the grid needs to be added to the tabPanel. There is no need for el at this time. Sometimes create your own new GridPanel class and inherit from GridPanel class. Use the ext.applyif method during the creation process to copy the attributes that are not in the new class but are in the original class. In this way, when calling the new class, the new class can pass a separate attribute value such as el. I have created a class package. Next I will talk about the encapsulation of the extension class I mentioned. Let’s finish the basic knowledge of grid first.
Look at the example mentioned above. ID is the only ID number of this Ext component. The ID number should be as unique as possible in the entire project. This makes it easier to identify and prevent other problems. For example, the ID problem will occur when the html of the tabPanel component is called.
ds, this is the setting data source.
The specific code of the example is as follows:
Java code
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}}); There is a lot to explain here. .
Since Ext is used on a website, it will definitely not be static, because I mostly interact with the server rather than directly reading XML files. So I used the example of reading data from the server here.
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
});
This is very simple Yes. You can understand it at a glance. HttpProxy transmits data requests to local files. To understand it simply, this is it. The core code has not been studied, and the specific operation process is unknown. But as a class. Just know how to use it.
But there is a concept here, using anonymous functions. Can't say anonymous functions. . . How to say it. . .
The proxy attribute is a form of sending requests to files. . The attribute assignment can be the name of an already created instance, or it can be an anonymous instance created with the new keyword. I don’t know if I can understand this.
The following attribute reader is to set the data reading method of this data source. This example uses jsonReader. ArreyReader can also be used. This depends on the specific needs. Property values can be objects or anonymous instance objects. It seems that it can also be a method. Haven't tried it, just an idea.
new Ext.data.JsonReader({
root : 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
Let’s talk about this part again. This is a relatively concise and standard JsonReader method.
First explain the Json data format. This is very important. I made a big mistake on this. I only know how to use json data to transmit, but I don’t know what format it is.
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"This is the type","time":"2008.02 .02"]})
This is a return record. If there are multiple.
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"This is the type","time":"2008.02 .02", {Article 2}, {Article 3}, {Article 4}]})
Can you understand? Haha, if you don’t understand, I’ll type a few more words. To summarize.
If you build a json array yourself and give it to Ext. It should be in this format.
{test:'test'}
You must memorize and expand the braces.
The name attribute declared above in the previous test is used as a mark symbol to tell JsonReader how to truncate the data after obtaining it.
The php I wrote returns the json data I used in the example above.
Echo $callback.'({"total":"'.$article_NUM.'","results":'.json_encode($result_array).'})';
Did you see it? I have to construct the format of this json array, and the markup symbol must be the same as on the jsonReader.
That is, the values intercepted by total and results are specified in this return. If the formats are different, the data cannot be read.
Looking back at the root attribute, it is to bind the json data format value behind the results tag symbol. Attributes after jsonReader
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
It is used to intercept the json array.
Finally load. Because this is just a definition and instantiation. No operations were performed on it.
This is easy to understand. Just like when you wash clothes and put them in the washing machine, but you don't turn on the switch or connect the power supply, the clothes will not be clean.
Since this Stroy data source has been created, its methods can be called on it. There is a method under Stroy called load. Load its data. That’s when the laundry started. Haha~
Next, go back to the properties of the GridPanel above
cm: userCM
This is the column header of the set table. What. You don't know what a lieutenant is. . You can take a shower and go to sleep.
Java code
var cm = new Ext.grid.ColumnModel([
selectBoxModel,
{header:'article number',dataIndex:'id', tooltip: 'article number'},
{header:'article title',dataIndex:'name',tooltip: 'article name'},
{header:'article type',dataIndex:'typename',tooltip: 'article category'},
{header:'Modification time',dataIndex:'time',tooltip: 'Modification time'}
]);
cm.defaultSortable = false;
var cm = new Ext.grid.ColumnModel ([
SELECTBOXMODEL,
{Header: 'Article serial number', dataindex: 'id', toOOLTIP: 'Article Number'},
{Header: 'Article Title', DataINDEX: 'Name', TOOLTIP : 'Article name'},
{header:'Article type',dataIndex:'typename',tooltip: 'Article category'},
{header:'Modification time',dataIndex:'time',tooltip : 'Modification time'}
]);
cm.defaultSortable = false; I don’t want to say anything more. . The only thing to note here: tooltip is to turn on mouse tips. The rest is no different from creating a new instance. new->Class name->Construction constructor->Attribute
defaultSortable is to set whether to sort. I set it to false because my Ext is not localized and the sort button is in English. So I set false. You can also set it individually for columns.
tbar: menubar,
bbar: pagingbar,
These two properties are used to set the header toolbar and bottom toolbar. There can be buttons on the toolbar.
Here are the bottom and top tool buttons. The instructions are written in the program code. . I have a habit of writing descriptions.
Java code
var menubar = [{
text:'Add',
tooltip:'Add a new article',
iconCls:'addItem',//Icon pull. You can understand it even in English
handler: function(){//The handler attribute is followed by a method, which binds the event processing after you click this button
var createWin = new SamPeng.account.Create();//I typed the file into a class package. So create the instance directly here.
createWin.show();// Add page display. This method omits the el binding problem.
}
},'-',{
id: 'grid-edit-button',
text:'Edit',
tooltip:'Edit 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 the interface display
}
}, '-',{
id: 'grid-delete-button',
text:'delete',
tooltip:'delete selected article',
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: 'Display items {0} to {1 } records, {2} in total',
emptyMsg: "No data"
}); //This is the bottom button, the bottom of a paging. Well. . I don’t know how to explain it. I wrote this and copied it directly from someone else’s. I don't think there is any need to change here. addItem',//Icon pull. You can understand it even if you read it in English
;//I typed the file into a class package. So create the instance directly here.
createWin.show();//Add page display. This method omits the el binding problem.
}
},'-',{
🎜 > iconCls:'editItem',
비활성화됨: true,
핸들러: function(){
var 레코드 = Ext.getCmp ('list-account-panel').getSelectionModel( ).getSelected();
var editWin = new SamPeng.Grid.Edit({id: Record.id})
id: 'grid-delete- 버튼',
텍스트:'삭제',
도구 설명:'선택한 기사 삭제',
iconCls:'remove',
비활성화: true var pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: '표시 항목 {0} {1}개 항목 총 {2}개 항목 기록',
emptyMsg : "데이터가 없습니다." 비어 있음Msg: "데이터 없음" 잘. . 어떻게 설명해야 할지 모르겠는데, 다른 사람의 글을 직접 복사해서 썼습니다. 여기서는 변경할 필요가 없다고 생각합니다. 좋아요. 기본적인 부분은 끝났습니다. . . 다음 글에서는 이를 클래스에 캡슐화하여 GridPanel 클래스를 상속받은 새로운 클래스로 사용하는 방법에 대해 설명하겠습니다.
문장을 다시 반복하세요. 나에게서 완전한 예를 얻을 수는 없습니다. 나에게 완전한 예가 없다는 것은 아니지만, 내 생각에는 그것이 당신에게 해를 끼칠 것이라고 생각합니다. 더 필요한 것은 API를 확인하는 것입니다. 메소드 형식을 알아보려면 API를 확인하세요. 이제 남은 것은 프로그램 아이디어를 완성하는 것입니다. 제 튜토리얼을 시청해 주셔서 감사합니다. 감사해요.
저는 빠른 튜토리얼을 싫어하지만 진부한지 아닌지는 잘 모르겠습니다. 헤헤. 모두에게 도움이 되기를 바랍니다.
리포스터. . . 나는 그러한 리포스터가 있다는 것을 알고 있습니다. 내용의 실용성은 전혀 고려하지 않고 옮겼습니다.
유명 작가 SamPeng의 재인쇄. 감사해요.
초심자에게 고급 기술을 가르치고 싶지는 않습니다. 연구도 하고 있기 때문입니다. 단지 사고의 방향, 하나의 예에서 추론하는 능력, Ext를 진정으로 학습하는 능력을 가르치고 싶을 뿐입니다. 그리고 그것을 깊이 이해하기 시작합니다. 특수 효과를 얻고 싶다면 이 기사가 적합하지 않지만 나와 함께 Ext를 배우고 싶다면 내 기사가 매우 적합하다고 생각합니다.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
