Extjs Development Summary

Last Update:2018-12-07 Source: Internet

Author: User

Tags autoload transparent image

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Extjs Development Summary ()

It is very practical and helpful for beginners.

I have done some extjs development before, from the most silly symbol problem to the rendering problem. The following is a summary of the personal development process, most of which are the response to the problem:

1. Pay attention to the file path when introducing JS and CSS files;

2. After importing the file to ext-base.js, set the value of ext.blank_image_url(s.gif location of the transparent image );

3. The error "identifier, string, or number missing" is prompted by IE. A comma is added before "}" during configuration, and the location is Ext. onready in the same JS file.

4. the IE prompt is that the variable is undefined. It is generally caused by a syntax error, such ",".

5. "invalid character" error. It may be "," typed ","

6. "missing '}'" error. The problem is that multiple parameters are missing. ","

7. When many files are loaded, use extjs to load the file.

8. The ext-base.js must be introduced before the ext-all.js

9. Ext. state. Manager. setprovider (New Ext. state. cookieprovider ());
Initialize the ext status manager and record the user's operation status in the cookie. If it is not enabled, the current status will not be saved during refresh, but will be reloaded.
If the Panel can be dragged in the window, if ext is enabled after the Panel is dragged. state. manager. setprovider (New Ext. state. cookieprovider (), even after refreshing the panel, it will still be in the position after you drag. If it is not enabled, it will be arranged by default.

10. Prompt for Disabling JavaScript in the browser
<NoScript class = "noticedialog"> <div>
<P> enable Javascript support in the browser! Otherwise, the system cannot be used normally. <br> after the system is enabled, refresh the page. </P>
</Div> </NoScript>

11. When placing complex components in a tabpanel, you must set the width of the tabpanel.

12、extjschinese text body in firefoxdisplay small questions, the answer is to create a CSS file named ext-patch.css, content see http://www.phpchina.com/html/78/78-28624.html

13, cultural issues, in the rear of the ext-all.js, hanging ext-lang-zh_CN.js can, such:
<SCRIPT type = "text/JavaScript" src = "<% = contextpath %>/public/JS/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "<% = contextpath %>/public/JS/ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "<% = contextpath %>/public/JS/ext-lang-zh_CN.js"> </SCRIPT>

14. The first item is automatically selected after the ComboBox is loaded.
VaR pn_zlfx_cbb_grade = new Ext. Form. ComboBox ({
Displayfield: 'name ',
Valuefield: 'id ',
Triggeraction: 'all ',
Width: 80,
Lazyinit: false,
Mode: 'local ',
Editable: false,
Forceselection: True,
Store: New Ext. Data. jsonstore ({
URL: site_url + 'get _ zlfx. asp? Grade_id = 0 ′,
Fields: ['id', 'name'],
Root: 'data ',
Autoload: True,
Listeners :{
Load: function (store, records, options ){
If (records. length! = 0 ){
Pn_zlfx_cbb_grade.setvalue (records [0]. Data. ID );
}
}
}
})

15. jsonstore sorting: sortinfo: {field: "name", direction: "ASC | DESC "}

16. The configuration attributes of the extjs class cannot be dynamically configured, just like the above method. Of course, you can call or set some common methods and attributes to change these configuration attributes, but you cannot directly set them.

17. XHTML strict mode: <! Doctype html
Public "-// W3C // dtd xhtml 1.0 strict // en"
"Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

18. Place the JavaScript code in the HTML document <SCRIPT> tag in <! Between [CDATA [and]>, so that the intermediate content is ignored during XHTML verification.

19. Add record to jsonstore
VaR orgalistrecord = new Ext. Data. Record. Create ([
{Name: 'id _ combo1 '},
{Name: 'name '}
]);
VaR orgalist = new Ext. Data. jsonstore ({
URL: './get_organisme.php ',
Root: 'orga ',
Fields: orgalistrecord
});
Orgalist. Add ([
New orgalistrecord ({'id _ combo1': 3, 'name': 'other '})
]);
Orgalist. Load ({Add: true}); // instead of orgalist. Load ();

20. Determine whether data exists before data is loaded:
If (typeof (pn_zlfx_gp_mark_subjects) = "undefined" | typeof (pn_zlfx_gp_mark_subjects.data) = "undefined ")
Pn_zlfx_gp_setting.store.removeall ();
Else
Pn_zlfx_gp_setting.store.loaddata (pn_zlfx_gp_mark_subjects );

21. Try to put the processing process in a critical position to reduce repeated code.

22. Default sorting method: sortdir

23. JSON data fields returned by the server are enclosed by 'or' to avoid conflict with JavaScript keywords and reserved words.

24. Ext. encode () error. The problem is that the JSON data is faulty.

25. Added totalproperty configuration for store, which can be obtained by store. getcount ().

26. Store Chinese sorting exception, which can be solved by reloading the Ext. Data. Store. Prototype. applysort Function

27. Store. Load () is an asynchronous operation. If you want to perform the operation after the data is loaded, you can perform the following operations:
Store. Load ({
Callback: function (Records ){
Alert (store. gettotalcount ());
}
});

28. extjs items cannot display the problem favorites
Sometimes it is not displayed when you add items ~~
The following methods may be solved after continuous testing:
1) try to add: Layout: 'fit'
2) If the xtype is 'panel ', try to add:
Listeners :{
'Activate': function (p) {P. dolayout ();}
, Single: True
}
3) if the xtype is 'tabpanel ', try to add:
Layoutontabchange: True
In general, the CMP. dolayout () problem ....

29. When form and isupload are added to Ext. Ajax. Request: True, the request method is enctype = "multipart/form-Data", and the value must be specially parsed in ASP.

30. Added mode in ComboBox: 'local' to manually control data loading and prevent secondary data loading.

31. To make the value manually entered by ComboBox ready for submission, you need to add the Blur event processing function of ComboBox.
Oncomboboxblur: function (field ){
Field. setvalue (field. getrawvalue ());
}

32. firebug displays all extjs component events
Ext. util. observable. Prototype. fireevent = ext. util. observable. Prototype. fireevent. createinterceptor (function (){
Console. Log (arguments );
Return true;
});

33. add and delete toolbar content
VaR TB = This. GP. gettoptoolbar ();
// Delete the toolbar content
VaR I = Tb. Items. getcount ();
While (I ){
Ext. Fly (Tb. Items. Get (I). getel (). Remove ();
TB. Items. removeat (I );
}
// Re-Add the toolbar content
TB. Add ('include (', this. cbgtype ,')');

34. Ext. UX. Form. lovcombo cannot set forceselection to true. Otherwise, the display value is cleared when the control loses focus.

35. In ie, the autowidth or layout: 'fit 'of Ext. gridpanel will pull the width for a long time. solution:

VaR grid = new Ext. Grid. gridpanel ({

Bodystyle: 'width: 100% ',

Autowidth: True,

.......

});
36. After Ext. gridpanel is added with cellselection, if viewconfig: {forcefit: true} is set, clicking the cell will cause the table to beat.
Solution: http://www.extjs.com/forum/showthread.php? P = 282928 # post282928

37. The solution to the first invalid filter execution in ComboBox is to add lastquery: "configuration

38. Adjust the height of the panel and automatically display the scroll bar. Add the following Configuration:
, Autoscroll: True
, Style: "Height: 100% ;"
, Bodystyle: "Height: 100% ;"

39. In some cases, loading iframe in the tabpanel is not displayed for the first time. You can re-set the SRC force loading of IFRAME after displaying the panel.