extjs 简单入门
2020-12-13 16:19
标签:des style class blog code http 中文网站: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 上代码: extjs 简单入门,搜素材,soscw.com extjs 简单入门 标签:des style class blog code http 原文地址:http://www.cnblogs.com/shenghaishiweini/p/3799060.htmlif (!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();
});
上一篇:php运行步骤解析
下一篇:python-----内置函数