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();
});