发布网友
共4个回答
懂视网
正文:我觉得ExtJs相对其他Js框架比较难上手,一些api都是英文的,学习资源也相对可能少一些,这里根据我自己所学的东西做了一套的简单的增删查改,框架还是Oracle+Ado.Net.
首先还是一个empPage.html,总体的页面布局以及表格数据:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="/Css/main.css" rel="stylesheet" type="text/css" /> <link href="/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/Ext/ext-all.js"></script> <script type="text/javascript" src="/Ext/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="/Js/Main.js"></script> <script type="text/javascript" src="/Js/GridMain.js"></script> <script type="text/javascript" src="Js/AddEmpInfo.js"></script> <script type="text/javascript" src="Js/DelEmpInfo.js"></script> <script type="text/javascript" src="Js/EditEmpInfo.js"></script> </head> <body> <form> <div> <div id="north" style=" background-image:url(/HotelUI/Images/main_top_BG.gif);width: 980px; height: 65px"> <div id="myTime" style="width: 237px; height: 19px; float:right; left: -11px; position: relative; top: 41px; font-size: 12px; color: #ffffff; z-index: 101;"> </div> <div id="UserName" style="width: 187px; height: 18px; float:right; left: 152px; position: relative; top: 21px; font-size: 12px; color: #ffffff; z-index: 102;"> </div> <div id="logo" style="width: 4px; height: 61px; background-image: url(Images/aa.gif);"> </div> </div> <div id="west" style="width: 190px; height: 400px; float:left"> </div> <div id="center" style="width: 579px; height: 400px; float:left"> </div> <div id="east" style="width: 160px; height: 400px; float:left"> </div> </div> <div id="south" style="width: 980px; height: 105px; color:Red; margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;" align="center"> <a>Footer Infomation YZR</a> </div> </form> </body> </html>
Main.Js包含了整个页面布局的设计以及相应布局下的一些事件代码:
//页面主要布局 Ext.onReady ( function() { //实例化布局对象 var view = new Ext.Viewport ( { layout:‘border‘, //声明为border布局 items: [ //头部 logo new Ext.BoxComponent ( { region:‘north‘, el: ‘north‘, //填充指定id的区域内容到north区域(页面会有一个div的id为north) height:65 } ), //底部 new Ext.BoxComponent ( { region:‘south‘, el: ‘south‘, //填充指定id的区域内容到south区域 height:20 } ), //中间,主要的表格数据,根据业务决定 { region:‘center‘, el:‘center‘, height:405, width:613, title:‘EMP详细信息‘, html:"<div id=‘grid‘></div>"//动态生成一个div }, //左边,一般用来摆放菜单数据 { region:‘west‘, split:true, margins:‘0 0 0 0‘, layout:‘accordion‘,//一种布局形式,很多js框架都提供这种布局,类似qq width:190, el:‘west‘, //填充指定id的区域内容到west区域 collapsible:true, title: ‘EMP管理菜单‘, layoutConfig: { animate:true }, items: [ { title: ‘日常EMP管理‘, border:false, html:‘<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>‘ }, { title: ‘EMP信息中心‘, border:false, html:‘<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>‘ } ] }, //右边 比较少用 { region:‘east‘, width:160, collapsible:true, title: ‘EMP右部模块‘, html:"<div id=‘moneyGrid‘></div>" } ] } ); //树形菜单 这边固定写死左边这颗树的数据,子节点和父节点是通过appendChild();实现的 // =================================== var root = new Ext.tree.TreeNode ( { id:‘root‘, text:‘树的根‘ } ); //第一个根节点 var a = new Ext.tree.TreeNode ( { id:‘a‘, icon:‘/ExtImg/Images/user3.gif‘,//图标文件 text: ‘普通EMP日常管理‘, expanded:true //展开显示 } ); //创建第一个根节点的第一个子节点 var a1 = new Ext.tree.TreeNode ( { id:‘a1‘, icon: ‘/ExtImg/Images/write.gif‘,//图标文件 text: ‘新增EMP信息‘, listeners: { ‘click‘:function(){ AddEmpInfo(); } } } ); //创建第一个根节点的第三个子节点 var a2 = new Ext.tree.TreeNode ( { id:‘a2‘, icon: ‘/ExtImg/Images/select.gif‘,//图标文件 text: ‘删除EMP信息‘, listeners: { ‘click‘: function (){ DelEmpInfo(); } } } ); //创建第一个根节点的第三个子节点 var a3 = new Ext.tree.TreeNode ( { id: ‘a3‘, icon: ‘/ExtImg/Images/select.gif‘,//图标文件 text: ‘编辑EMP信息‘, listeners: { ‘click‘: function () { EditEmpInfo(); } } } ); //添加子节点到第一个根节点 a.appendChild(a1); a.appendChild(a2); a.appendChild(a3); root.appendChild(a); var tree = new Ext.tree.TreePanel ( { renderTo:"tree1",//页面id为tree1的div root:root, //对应的根节点 animate:true, //动态显示 enableDD:false, //支持拖放 border:false, lines:true, //虚线 rootVisible:false, //显示根节点 containerScroll: true } ); } );Main.Js
GridMain.Js是Emp表格数据的js代码:
//主界面的Grid //获得输入的字符串 //var message = ""; //storeMain为数据来源 var storeMain=new Ext.data.Store ( { //表示从哪里获得数据 proxy:new Ext.data.HttpProxy ( { url:‘/Ajax/getEmpList.ashx‘ } ), //解析Json reader: new Ext.data.JsonReader ( { root: ‘data‘, //主键 id: ‘JSON_empno‘, //表格显示字段列 fields: [ ‘JSON_empno‘, ‘JSON_ename‘, ‘JSON_job‘, ‘JSON_sal‘, ‘JSON_mgr‘, ‘JSON_hiredate‘, ‘JSON_comm‘, ‘JSON_deptno‘ ] } ), remoteSort:true } ); var grid; Ext.onReady ( function() { var colModel = new Ext.grid.ColumnModel ( [ { header: "empno", width: 100, dataIndex: ‘JSON_empno‘ }, { header: "ename", width: 100, dataIndex: ‘JSON_ename‘ }, { header: "job", width: 110, dataIndex: ‘JSON_job‘ }, { header: "sal", width: 120, renderer: getColor, dataIndex: ‘JSON_sal‘ }, { header: "mgr", width: 120, dataIndex: ‘JSON_mgr‘ }, { header: "hiredate", width: 125, renderer: formatterdate, dataIndex: ‘JSON_hiredate‘ }, { header: "comm", width: 120, dataIndex: ‘JSON_comm‘ }, { header: "deptno", width: 120, dataIndex: ‘JSON_deptno‘ } ] ); //设置金额颜色 function getColor(val) { if (val != "") { var value = parseInt(val); if(value>2000){ return ‘<span style="color:red;">‘ + ‘$‘ + val + ‘</span>‘; } return ‘<span style="color:green;">‘+ ‘$‘ + val + ‘</span>‘; } } function formatterdate(val, row) { if (val != null) { var date = new Date(val); return date.getFullYear() + ‘-‘ + (date.getMonth() + 1) + ‘-‘ + date.getDate(); } } grid = new Ext.grid.GridPanel ( { renderTo:‘grid‘, height:500, width:1005, cm:colModel, //行列 store:storeMain, //数据源 trackMouseOver:true, //鼠标特效 loadMask: true, autoShow : true, autoScroll: true, //头部 tbar: [ ‘empNo查询‘, {xtype:‘textfield‘,width:170,id:‘title‘,name:‘title‘}, {text:‘搜索‘,iconCls:‘search‘,handler:SerachGrid},{xtype:‘tbseparator‘} ] } ) //加载数据 storeMain.load(); } ); function SerachGrid() { var message = Ext.get(‘title‘).dom.value; storeMain.reload ( { params:{msg:message} } ) }GridMain.Js
左边为菜单栏,有三个子菜单分别演示用于对Emp表格数据的增删改:
//添加普通员工 function AddEmpInfo() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = ‘side‘; //编写一个作为window窗体 的item var addUser = new Ext.FormPanel ( { labelWidth:75, frame : true, title : ‘请仔细填写表单‘, width : 300, waitMsgTarget : true, items: [ { xtype:‘textfield‘, fieldLabel: ‘ Empno‘, labelStyle: ‘width:80px‘, width:150, name: ‘Empno‘, allowBlank:false, blankText: ‘请输入Empno‘ //validator:CheckUserId,//指定验证的方法 //invalidText:‘用户名已存在!‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Ename‘, labelStyle: ‘width:80px‘, width: 150, name: ‘Ename‘, allowBlank: false, blankText: ‘请输入Ename‘ //validator:CheckUserId,//指定验证的方法 //invalidText:‘用户名已存在!‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Job‘, labelStyle: ‘width:80px‘, width: 150, name: ‘Job‘, allowBlank: false, blankText: ‘请输入Job‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Mgr‘, labelStyle: ‘width:80px‘, width: 150, name: ‘Mgr‘, allowBlank: false, blankText: ‘请输入Mgr‘ }, { xtype:‘textfield‘, fieldLabel: ‘ Hiredate‘, labelStyle: ‘width:80px‘, width:150, name: ‘Hiredate‘, allowBlank:false, blankText: ‘请输入Hiredate‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Sal‘, labelStyle: ‘width:80px‘, width: 150, name: ‘Sal‘, allowBlank: false, blankText: ‘请输入Sal‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Comm‘, labelStyle: ‘width:80px‘, width: 150, name: ‘Comm‘, allowBlank: false, blankText: ‘请输入Comm‘ }, { xtype:‘textfield‘, fieldLabel: ‘ Deptno‘, labelStyle: ‘width:80px‘, width:150, name: ‘Deptno‘, allowBlank:false, blankText: ‘请输入Deptno‘ } ], buttons: [ { id:‘btnOk‘, text:‘确 定‘, handler:function() { //如果验证合法 if (addUser.form.isValid()) { //弹出效果 Ext.MessageBox.show ( { msg: ‘正在保存,请稍等...‘, progressText: ‘Saving...‘, width:300, wait:true, waitConfig: {interval:200}, icon:‘download‘, animEl: ‘saving‘ } ); setTimeout(function(){}, 10000); //提交到服务器 addUser.form.submit ( { url:‘/Ajax/addEmpInfo.ashx‘, //提交的页面路径 method:‘post‘,//提交方式为post //提交成功的回调函数 success:function(form,action) { var flage = action.result.success; //如果服务器端传过来的数据为true则表示登录成功 if (flage == true) { Ext.MessageBox.alert(‘恭喜‘,‘添加员工成功!‘); newWin.hide(); } }, //提交失败的回调函数 failure:function() { Ext.Msg.alert(‘错误‘,‘服务器出现错误请稍后再试!‘); } } ); } } }, { text:‘取 消‘, handler:function() { newWin.hide(); } } ] } ); //定义窗体 newWin = new Ext.Window ( { layout:‘fit‘, width:350, height:350, collapsible:true, //允许缩放条 closeAction : ‘hide‘, plain : true, modal: ‘true‘, //启用遮罩 title : ‘添加EMP员工‘, items : addUser } ); //显示窗体 newWin.show(); } //Ajax验证是否已存在EmpNo //var isok=false; //function CheckUserId() //{ // var UserId = Ext.get(‘LoginName‘).dom.value; // //ajax提交 // Ext.Ajax.request // ( // { // url:‘/HotelUI/Form/CheckUserId.aspx‘, // params:{name:UserId}, // success: function(response, options) // { // // var check = Ext.util.JSON.decode(response.responseText); // if(check.success == true) //已被注册 // { // SetValue(false); // } // else // { // SetValue(true); // } // } // } // ); // //给变量赋值 // function SetValue(b) // { // isok = b; // } // return isok; //}AddEmpInfo
function DelEmpInfo() { var selected = grid.getSelectionModel().getSelections(); if (selected != null) { var ids = ""; Ext.each(selected, function () { var id = this.get(‘JSON_empno‘); ids = ids + id + ","; }) ids = ids.substring(0, ids.length - 1); //Ext.Msg.alert(‘提示‘, ids); Ext.MessageBox.confirm("提示", "是否要删除", function (yes) { if (yes == ‘yes‘) { //Ext.Msg.alert(‘提示‘, ids); //$.post("", { "action": "del", id: ids }, function (data) { // Ext.Msg.alert(‘提示‘, data); //}); Ext.Ajax.request({ url: ‘/Ajax/delEmpInfo.ashx‘, params: { "action": "del", ids: ids }, method: ‘POST‘, success: function (response, options) { Ext.MessageBox.alert(‘删除成功‘, response.responseText); storeMain.reload(); }, failure: function (response, options) { Ext.MessageBox.alert(‘删除失败‘, ‘请求超时或网络故障,错误编号:‘ + response.status); } }); } }) } else { Ext.Msg.alert(‘提示‘, ‘您还没有选中一行数,请选中在删除!‘); } }DelEmpInfo
function EditEmpInfo() { var selected = grid.getSelectionModel().getSelections(); if (selected != null) { var id = ""; Ext.each(selected, function () { id = this.get(‘JSON_empno‘); }) Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = ‘side‘; var reader = new Ext.data.JsonReader({}, [ { name: ‘Empno‘, type: ‘string‘ }, { name: ‘Ename‘, type: ‘string‘ }, { name: ‘Job‘, type: ‘string‘ }, { name: ‘Mgr‘, type: ‘int‘ }, { name: ‘Hiredate‘, type: ‘string‘, dateFormat: ‘Y-m-d H:i:s‘ }, { name: ‘Sal‘, type: ‘float‘ }, { name: ‘Comm‘, type: ‘float‘ }, { name: ‘Deptno‘, type: ‘int‘ } ]); var updateEmp = new Ext.FormPanel({ labelAlign: ‘right‘, title: ‘编辑Emp‘, labelWidth: 50, frame: true, url: ‘/Ajax/EditEmpInfo.ashx‘, width: 280, reader: reader, items: [ { layout: ‘column‘, border: false, items: [ { columnWidth: .5, layout: ‘form‘, border: false, items: [ { xtype: ‘textfield‘, fieldLabel: ‘ Empno‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Empno‘, allowBlank: false, blankText: ‘请输入Empno‘, hidden: true, hideLabel: true, }, { xtype: ‘textfield‘, fieldLabel: ‘ Ename‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Ename‘, allowBlank: false, blankText: ‘请输入Ename‘ } ] }, { columnWidth: .5, layout: ‘form‘, border: false, items: [ { xtype: ‘textfield‘, fieldLabel: ‘ Job‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Job‘, allowBlank: false, blankText: ‘请输入Job‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Mgr‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Mgr‘, allowBlank: false, blankText: ‘请输入Mgr‘ } ] } ] }, { xtype: ‘textfield‘, fieldLabel: ‘ Hiredate‘, labelStyle: ‘width:100px‘, width: 150, name: ‘Hiredate‘, allowBlank: false, blankText: ‘请输入Hiredate‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Sal‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Sal‘, allowBlank: false, blankText: ‘请输入Sal‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Comm‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Comm‘, allowBlank: false, blankText: ‘请输入Comm‘ }, { xtype: ‘textfield‘, fieldLabel: ‘ Deptno‘, labelStyle: ‘width:100px‘, width: 80, name: ‘Deptno‘, allowBlank: false, blankText: ‘请输入Deptno‘ } ], buttons: [{ text: ‘提交‘, handler: function () { //如果验证合法 if (updateEmp.form.isValid()) { //弹出效果 Ext.MessageBox.show ( { msg: ‘正在保存,请稍等...‘, progressText: ‘Saving...‘, width: 300, wait: true, waitConfig: { interval: 200 }, icon: ‘download‘, animEl: ‘saving‘ } ); setTimeout(function () { }, 10000); //提交到服务器 updateEmp.form.submit ( { url: ‘/Ajax/EditEmpInfo.ashx‘, //提交的页面路径 method: ‘post‘,//提交方式为post //提交成功的回调函数 success: function (form, action) { var flage = action.result.success; //如果服务器端传过来的数据为true则表示登录成功 if (flage == true) { Ext.MessageBox.alert(‘恭喜‘, ‘修改成功!‘ var cpro_id = "u6292429";
热心网友
如果要发展比较好的话,就是需要学习三层架构,学习mvc,还需要学好两条或以上的数据库(sql server ,mysql,oracle),那其实就是要会写jquery要比较深入,也可以学习extjs,最后就是学习一下div+css。
……………………………………………………
如果对aspnet感兴趣,看看一个大专生怎么自学aspnet到找到工作。
先做个自我介绍,我07年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说 出来献丑了。09年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不 到希望,我就退学了。
退学后我也迷茫,大专都没有毕业,我真的不知道我能干什么,我在纠结着我能做什么。所以辍学后 我一段时间,我想去找工作,因为我比较沉默寡言,不是很会说话,我不适合去应聘做业务。我想应聘 做技术的,可是处处碰壁。
一次偶然的机会,我才听到aspnet这个行业。那天我去新华书店,在计算机分类那边想找本书学习 。后来有个女孩子走过来,问我是不是读计算机的,有没有兴趣学习aspnet,然后给我介绍了一下 aspnet现在的火热情况,告诉我学aspnet多么的有前景,给我了一份传单,aspnet培训的广告。听了 她的介绍,我心里*的,确实我很想去学会一门自己的技术,靠自己的双手吃饭。
回家后,我就上网查了下aspnet,确实是当今比较热门的行业,也是比较好找工作的,工资也是相 对比较高。我就下决心想学aspnet了。于是我去找aspnet培训的相关信息,说真的,我也很迷茫,我 不知道培训是否真的能像他们宣传的那样好,所以我就想了解一段时间再做打算。
后来,我在百度知道看到一篇让我很鼓舞的文章是一个aspnet高手介绍没有基础的朋友怎么自学入 门学aspnet,文章写的很好,包含了如何学习,该怎么学习。他提到一个方法就是看视频,因为看书实 在太枯燥和费解的,很多我们也看不懂。这点我真的很认同,我自己看书往往看不了几页。
我在想,为什么别人都能自学成才,我也可以的!我要相信自己,所以我就想自学,如果实在学不会 我再去培训。
主意一定,我就去搜索aspnet的视频,虽然零星找到一些aspnet的视频,但是都不系统,我是想找 一个能够告诉我该怎么学的视频,一套从入门到精通的视频,一个比较完整的资料,最好能有老师教, 不懂可以请教的。
后来我又找到一份很好的视频,是在IT学习联盟推出的一份视频《零基础aspnet就业班》(喜欢《 零基础aspnet就业班》的可以复制 sina.lt/bsjr 粘贴浏览器地址栏按回车键即打开)
下面介绍下我的学习流程,希望对和我一样完全没有基础的朋友有所帮助。
收到他们寄过来的光盘后,我就开始学习了,由于我没有什么基础,我就从最简单的C#语言视频教程 学起,话说简单,其实我还是很多不懂的,只要重复多看几遍,就能看懂。C#语言我差不多学了一个礼 拜,接下来我就学了winform,SQL Server,html/css/javaScript,差不多也就三个礼拜。我每天都在不 停的写一些简单的代码,这样一月后我基本掌握了aspnet的全部基础。
接下来开始学习aspnet高级课程,老师幽默风趣而又轻松的课堂教课,使我发现原来学习aspnet并 不是一件很难的事情。之前我把aspnet基础学得还不错,到了到了aspnet高级部分,我觉不又不是很 难,可能老师太牛了,他能把复杂的问题讲的比较通俗易懂,有些难点的地方我还是连续看了五六次, 把他弄懂。每天下午6点下班后,吃了饭,马上跑回家。看视频,买了几本笔记本。当时,为了编程还花几百元了台二手的台式电脑,配置一般,但编程是足够的。一边看视频,一边记笔记,把重点都记下来,还一边跟着老师敲代码,为了能尽早学会aspnet。每天都坚持学5-6个小时。经常学到晚上一点多才睡觉。星期六,日不用上班,每天7点多起床,学到晚上11,12点。那段时间特别辛苦,特别累。在学习aspnet的三个多月里,除了吃饭睡觉工作,剩余的时间都在学习,因为我知道自己的计算机基础不是很好,也没有学过什么计算机,相对于那些科班的人来说我要比他们付出更多的努力。我只能咬紧牙关,坚持下去,我不能放弃,我要完成我的梦想,我要让我的家人过上好日子。终于三个多月后我把aspnet教程里的内容和项目都学完了,在学项目的过程中我发现项目特别重要,他能把你学过的知识全部联系起来,能更好的理解你所学的知识。还有学习过程中,动手很重要,要经常跟着老师动手敲,动手吧,跟着做,一行一行的跟着敲,再试着加一些自己的功能,按照自己的思路敲一些代码,收获远比干听大的多。 如果遇到暂时对于一些思路不能理解的,动手写,先写代码,慢慢你就会懂了。
于是我就到51job疯狂的投简历,因为我学历的问题,专科没有毕业,说真的,大公司没有人会要我,所以我投的都是民营的小公司,我希望自己的努力有所回报。没有想过几天过后,就有面试了,但是第一次面试我失败了,虽然我自认为笔试很好,因为我之前做了准备,但是他们的要求比较严格,需要有一年的项目经验,所以我没有被选中。
后来陆续面试了几家公司,终于功夫不负有心人。我终于面试上的,是在闵行的一家民营的企业,公司规模比较小,我的职务是aspnet开发程序员,但我也比较满足,开的工资是3500一个月,虽然我知道在上海3500只能过温饱的生活,但是我想我足够了。我至少不用每天都要靠父母养,我自己也能养活自己的。我想只要我继续努力,我工资一定会翻倍的。
把本文写出来,希望能让和我一样的没有基础的朋友有信心,其实我们没有必要自卑,我们不比别人笨,只要我们肯努力,我们一样会成功。
…………………………………………
热心网友
如果要发展比较好的话,就是需要学习三层架构,学习mvc,还需要学好两条或以上的数据库(sql server ,mysql,oracle),那其实就是要会写jquery要比较深入,也可以学习extjs,最后就是学习一下div+css,那如果还要全面发展就需要学习java还有php
热心网友
asp.net在线讲解