extjs 简单入门
中文网站:http://extjs.org.cn/
英文网站：http://www.sencha.com/products/extjs/
1、简介
extJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
2、简单使用
需要这些包的支持：ext-all.css，ext-all.js，ext-lang-zh_CN.js
上代码：
if (!courseware) { courseware = { }; } courseware.showSchemeSwf = function(swfFile) { if (!swfFile) { return; } //$("#player").show(); $('#documentViewer').FlexPaperViewer(//仿百度文库插件 { config : { jsDirectory : courseware.swfDirectory, SWFFile :swfFile, Scale : 0.6, ZoomTransition : 'easeOut', ZoomTime : 0.5, ZoomInterval : 0.2, FitPageOnLoad : true, FitWidthOnLoad : false, FullScreenAsMaxWindow : true, ProgressiveLoading : false, MinZoomSize : 0.2, MaxZoomSize : 5, SearchMatchAll : true, InitViewMode : 'Portrait', RenderingOrder : 'flash', StartAtPage : '', ViewModeToolsVisible : true, ZoomToolsVisible : true, NavToolsVisible : true, CursorToolsVisible : true, SearchToolsVisible : true, WMode : 'window', localeChain: 'zh_CN' }} ); }; courseware.colsePlayer = function() { //$("#player").hide(); }; courseware.departmentID=""; var Courseware = Ext.define('Courseware', { extend: 'Ext.data.Model', fields: [ {name: 'coursewareId', type: 'string'}, {name: 'coursewareName', type: 'string'}, {name: 'uploadTime', type: 'string'}, {name: 'coursewarePath', type: 'string'}, {name: 'coursewareSwfPath', type: 'string'} ] }); courseware.createItems =function (){//显示的菜单 var items = []; if (training.user.role == '0') {//用户的权限，在JS中，从session中获得 items.push({ id : "btn-add", iconCls: 'icon-add', text: '上传课件', handler: courseware.onAddClick }, { id : "btn-delete", iconCls: 'icon-delete', text: '删除课件', disabled: true, handler: courseware.onDeleteClick }); } items.push({ id : "btn-download", iconCls: 'icon-download', text: '下载课件', disabled: true, hidden:true, handler: courseware.onDownloadClick },{ id : "btn-view", iconCls: 'icon-view', text: '观看课件', disabled: true, handler: courseware.onViewClick },"->",{ xtype:'combo', id:'departments', fieldLabel: '部门列表', labelWidth:60, editable:false, store: CommonUtil.departmentStoreWithAll, queryMode: 'local', displayField: 'departmentName', valueField: 'departmentId', value:"", listeners :{ change: function(view, selections) { var departmentId = Ext.getCmp('departments').getValue(); courseware.departmentID=departmentId; Ext.getCmp('coursewarePanel').getStore().getProxy().url='......?Id='+departmentId; courseware.store.loadPage(1); } } }); return items; }; courseware.store = Ext.create('Ext.data.Store', {//从指定地址获得数据 storeId:'coursewareStore', model:Courseware, pageSize:10, proxy: { type: 'ajax', url: 'courseware/getfiles', params: { departmentId:"" }, reader: { type: 'json', totalProperty: 'dataCnt', root: 'data' } } }); courseware.uploadfileWindow = Ext.create('Ext.window.Window', {//窗体 title: '上传课件', height: 150, width: 320, closeAction:'hide', items: { xtype: 'form', layout: 'form', id: 'passwordForm', defaultType: 'textfield', height:100, border:0, bodyStyle: { background: '#dfe8f6', padding: '20px' }, items: [{ xtype: 'filefield', regex:/^.*?\.(pdf|ppt|doc)$/, regexText:'文件格式有误,只能上传pdf|ppt|doc格式的文件', name: 'filename', fieldLabel: '请选择课件', labelWidth: 80, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: '选择课件' }], buttons: [{ text: '上传', handler: function() { var form = this.up('form').getForm(); if(form.isValid()){ form.submit({ url: courseware.fileuploadUrl+"?departmentId="+courseware.departmentID, waitMsg: '正在上传课件，请稍等', success: function(form, action,response) { courseware.handleupload(form, action,response); }, failure: function(form, action,response) { courseware.handleupload(form, action,response); } }); } } }] } }); courseware.handleupload = function(form, action,response) { if (action.result.status == 'OK') { //courseware.uploadfileWindow.hide(); //Ext.Msg.alert('成功', '文件转码中，请稍后'); //Ext.getCmp('coursewarePanel').getStore().getProxy().url='...'+courseware.departmentID; //courseware.store.loadPage(1); } else { //courseware.uploadfileWindow.hide(); //Ext.Msg.alert('失败', '上传失败，请检查网络，稍微再传！'); } /**权益之计，这个问题需要解决*/ courseware.uploadfileWindow.hide(); Ext.getCmp('coursewarePanel').getStore().getProxy().url='....?id='+courseware.departmentID; courseware.store.loadPage(1); }; courseware.onAddClick = function() { if(courseware.departmentID=="") { Ext.Msg.alert('警告', '请选择部门'); return; } courseware.uploadfileWindow.show(); }; courseware.onDownloadClick= function() { var selects = courseware.coursewarePanel.getSelectionModel().getSelection(); if (selects.length == 0) { CommonUtil.warn("请选择课件"); return false; } var path = selects[0].data.coursewarePath; window.location.assign('courseware/downloadfiles?filepath='+path); }; courseware.onDeleteClick = function() { var selects = courseware.coursewarePanel.getSelectionModel().getSelection(); if (selects.length == 0) { CommonUtil.warn("请选择课件"); return false; } CommonUtil.confirm("确认删除选中的课件？", function(){ var coursewareId = selects[0].data.coursewareId; Ext.Ajax.request({ url : 'courseware/filedelete?coursewareId=' + coursewareId, success : function(response) { var obj = Ext.decode(response.responseText); if (obj.status == "OK") { Ext.getCmp('coursewarePanel').getStore().getProxy().url='......Id='+courseware.departmentID; courseware.store.loadPage(1); } else { Ext.Msg.alert("错误", "网络错误，请稍后再试"); } } }); }); }; courseware.onViewClick =function(){ var selects = courseware.coursewarePanel.getSelectionModel().getSelection(); if (selects.length == 0) { CommonUtil.warn("请选择课件"); return false; } var path = selects[0].data.coursewareSwfPath; window.open('.....?path='+path+'&name='+selects[0].data.coursewareName); }; Ext.onReady(function() { courseware.coursewarePanel = Ext.create('Ext.grid.Panel', { id:'coursewarePanel', renderTo: "departmentCoursewares", store: courseware.store, width: 526, height: 400, title: '课件列表', selModel : Ext.create('Ext.selection.CheckboxModel', {mode:'single',allowDeselect:true}), selType: 'rowmodel', dockedItems: [{ xtype: 'toolbar', items: courseware.createItems() }, { xtype: 'pagingtoolbar', store: courseware.store, // same store GridPanel is using dock: 'bottom', displayInfo: true }], columns: [{ text: '课件ID', width: 100, sortable: false, hidden: true, dataIndex: 'coursewareId' },{ text: '课件路径', width: 100, sortable: false, hidden: true, dataIndex: 'coursewarePath' },{ text: '课件名', width: training.user.role=='0'?300:500, dataIndex: 'coursewareName', hidden: false, editor: 'textfield' },{ text: '上传时间', width: 200, dataIndex: 'uploadTime', hidden: training.user.role=='0'?false:true, editor: 'textfield' }], listeners : { selectionchange : function( curr, selected, eOpts ) { if (selected.length != 0) { Ext.getCmp("btn-download").enable(); Ext.getCmp("btn-view").enable(); if (training.user.role == '0') Ext.getCmp("btn-delete").enable(); } else { Ext.getCmp("btn-download").disable(); Ext.getCmp("btn-view").disable(); if (training.user.role == '0') Ext.getCmp("btn-delete").disable(); } } } }); CommonUtil.departmentStoreWithAll.load(); Ext.getCmp('coursewarePanel').getStore().getProxy().url='...?Id='+''; courseware.store.reload(); });