js
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

javascript代码实例教程-EXTJS入门教程及其框架搭建

发布时间：2019-02-01 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-EXTJS入门教程及其框架搭建，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。

原创不易，转载请注明出处：EXTJS入门教程及其框架搭建

代码下载地址:https://www.zuidaima.COM/share/1724474768788480.htm

首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具：extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：

1 <script tyPE=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script>
2 <script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script>
3 " stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " />
4 <script type=" text/javascript " src= "XXXXX.js "></script>

并在BODY中加入下面这段JAVA SCRIPT：

01 <script>
02 Ext.onReady( function () {
03 Ext.QuickTips.inIT();
04 Ext.form.Field.PRototype.msgTarget='side';
05 VAR viewport=new Ext.Viewport( {
06 layout : 'fit',
07 border : false,
08 items : [new System.XXXXX()]
09 });
10 viewport.render();
11 });
12 </script>

其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。

附完整的代码：
PagingGridPanel.js

001 Ext.namespace('system');
002 system.PagingGridPanel = function(config) {
003 Ext.applyIf(this, config);
004 this.initUIcomponents();
005 system.PagingGridPanel.superclass.constructor.call(this);
006 this.loadData();
007 };
008 Ext.extend(system.PagingGridPanel, Ext.Panel, {
009 initUIComponents : function() {
010 // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
011 this.Store1 = new Ext.data.Store({
012 Proxy : new Ext.data.MemoryProxy({
013 total : 2,
014 root : [{
015 age : 56,
016 name : "IOyFo"
017 }, {
018 age : 239,
019 name : "87tPp"
020 }]
021 }),
022 reader : new Ext.data.JsonReader({
023 root : "root",
024 total : "total",
025 id : "id"
026 }, [{
027 mapping : "name",
028 name : "name"
029 }, {
030 type : "int",
031 mapping : "age",
032 name : "age"
033 }])
034 });
035
036 this.gridPanel1 = new Ext.grid.GridPanel({
037 bbar : new Ext.PagingToolbar({
038 xtype : "paging",
039 emptyMsg : "No data to display",
040 displayMsg : "Displaying {0} - {1} of {2}",
041 store : this.store1
042 }),
043 selModel : new Ext.grid.RowSelectionModel({}),
044 columns : [{
045 header : "name",
046 dataIndex : "name",
047 sortable : true,
048 hidden : false
049 }, {
050 header : "age",
051 dataIndex : "age",
052 sortable : true,
053 hidden : false
054 }],
055 store : this.store1,
056 height : 200,
057 tbar : new Ext.Toolbar([{
058 handler : function(button, event) {
059 this.onButtonClick(button, event);
060 }.createDelegate(this),
061 text : "button"
062 }, {
063 handler : function(button, event) {
064 this.onButtonClick(button, event);
065 }.createDelegate(this),
066 text : "button2"
067 }])
068 });
069
070 Ext.apply(this, {
071 items : [this.gridPanel1]
072 });
073 // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
074 },
075 loadData : function() {
076 this.store1.load();
077 },
078 onButtonClick : function(button, event) {
079 this.store1 = new Ext.data.Store({
080 proxy : new Ext.data.MemoryProxy({
081 total : 2,
082 root : [{
083 age : 56,
084 name : "88888"
085 }, {
086 age : 239,
087 name : "99999"
088 }]
089 }),
090 reader : new Ext.data.JsonReader({
091 root : "root",
092 total : "total",
093 id : "id"
094 }, [{
095 mapping : "name",
096 name : "name"
097 }, {
098 type : "int",
099 mapping : "age",
100 name : "age"
101 }])
102 });
103 this.store1.reload();
104 }
105 });

index.html

01
02 <html XMlns="https://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
05 <script src="https://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js">script>
06 <script src="https://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js">script>
07 <link href="https://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
08 <script type="text/javascript" src="PagingGridPanel.js">script>
09 head>
10 <body>
11 <script>
12 Ext.onReady(function() {
13 Ext.QuickTips.init();
14 Ext.form.Field.prototype.msgTarget = 'side';
15 var viewport = new Ext.Viewport( {
16 layout : 'fit',
17 border : false,
18 items : [new system.PagingGridPanel()]
19 });
20 viewport.render();
21 });
22 script>
23
24 body>
25 html>

项目截图

javascript代码实例教程-EXTJS入门教程及其框架搭建

运行截图

javascript代码实例教程-EXTJS入门教程及其框架搭建


觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-EXTJS入门教程及其框架搭建全部内容，希望文章能够帮你解决javascript代码实例教程-EXTJS入门教程及其框架搭建所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：AJAXClassconstconstconstCSSCSSHTMLletMapMappost-format-gallerythis
猜你在找的js相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新js教程
热门js教程