葡京在线开户ExtJS 4.2 业务开销(一)主页搭建

PAT 1080. MOOC期到底成

对以中国大学MOOC(http://www.icourse163.org/)学习“数据结构”课程的学童,想如果拿走同张合格证书,必须首先得到未少于200分的在线编程作业分,然后总评获得未少于60分(满分100)。总评成绩的计算公式为
G = (G期中x 40% + G期末x 60%),如果 G期吃 > G期末;否则总评 G 就是
G期末。这里 G期中 和 G欲末 分别吗学生的期中和末代成绩。

现行底题材是,每次试验都来相同摆独立的成绩单。本题就告而编写程序,把不同之实绩单合为同摆放。

输入格式:

输入在首先执吃来3单整数,分别是
P(做了在线编程作业的学生数)、M(参加了期中考试的生勤)、N(参加了期末考试的学员往往)。每个数还非超10000。

连下有三块输入。第一片包含 P 个在线编程成绩 G编程;第二块包含 M
个期中考试成绩 G期吃;第三片包含 N 个期末考试成绩
G期末。每个成绩占一履行,格式为:学生学号
分数。其中学生学号为未超20个字符的英文字母和数字;分数是休因整数(编程总分最高也900分,期吃及后期的嵩分为100分叉)。

输出格式:

打印出得合格证的学生名单。每个学生占一实行,格式为:

学生学号 G编程 G期吃 G期末 G

假定部分成绩未在(例如某人没参加期中考试),则于对应的职输出“-1”。输出顺序为以总评分数(四放弃五称精确到整数)递减。若发生并列,则按照学号递增。题目保证学号没有更,且至少有1独合格的学童。

输入样例:

6 6 7
01234 880
a1903 199
ydjh2 200
wehu8 300
dx86w 220
missing 400
ydhfu77 99
wehu8 55
ydjh2 98
dx86w 88
a1903 86
01234 39
ydhfu77 88
a1903 66
01234 58
wehu8 84
ydjh2 82
missing 99
dx86w 81

出口样例:

missing 400 -1 99 99
ydjh2 200 98 82 88
dx86w 220 88 81 84
wehu8 300 55 84 84

1. 主页结构说明

分析

一律看即道题之流年100ms,
就当为此scanf,printf读入和出口了节省时间,第二,不要为此查找操作最后动用顺序容器或者map的下标来索,节省时间,在就书中map
自从及了将每个学生的string或者字符串形式之id与存储学生信息的数组的下标联系了起,即好就此id直接得到了相应的学生的信息;

2. 扩展功能

此处说明主页常见的2栽效应:

第1种:点击菜单,动态加载业务文件。

第2种:业务tab页的切换,修改页面URL的值。

代码如下

#include<iostream>
#include<vector>
#include<algorithm>
#include<math.h>
#include<map>
#include<string.h>
using namespace std;
struct student{
    char id[21];
    int online=0;
    int G1=-1;
    int G2=-1;
    int G=0;
};
bool comp(student s1,student s2){
     if(s1.G>s2.G) return true;
     else if(s1.G==s2.G&&strcmp(s2.id,s1.id)>0)  return true;
     else return false;
}
int main(){
    vector<student> vi(100001);
    map<string,int> mapp;
    int p,m,n,grade,cnt=0,tag=1;
    cin>>p>>m>>n;
    char id[21];
    for(int i=0;i<p;i++){
        scanf("%s %d",id,&grade);
        if(grade>=200&&grade<=900){
         vi[tag].online=grade; 
         for(int j=0;j<21;j++)
         vi[tag].id[j]=id[j];
         mapp[id]=tag++;
        }
    }
    for(int i=0;i<m;i++){
        scanf("%s %d",id,&grade);
        if(mapp[id]!=0&&grade>=0&&grade<=100)
        vi[mapp[id]].G1=grade;
    }
    for(int i=0;i<n;i++){
        scanf("%s %d",id,&grade);
        if(mapp[id]&&grade>=0&&grade<=100){
            vi[mapp[id]].G2=grade;
            grade>=vi[mapp[id]].G1?vi[mapp[id]].G=grade:vi[mapp[id]].G=round(0.4*(vi[mapp[id]].G1)+0.6*(vi[mapp[id]].G2));
            if(vi[mapp[id]].G>=60) cnt++;
        }
    } 
    sort(vi.begin()+1,vi.begin()+1+p,comp);
    for(int i=1;i<=cnt;i++)
       printf("%s %d %d %d %d\n",vi[i].id,vi[i].online,vi[i].G1,vi[i].G2,vi[i].G);  
    return 0;
}

1.1 主页布局

俗的ExtJS 4.2采取,基本布局如下:

葡京在线开户 1

 

3. 在线演示

在线演示:http://www.akmsg.com/ExtJS/index.html

 

End

Web开发之路系列文章

食谱加载中…

2.1 点击菜单,动态加载业务文件

说明:各业务的入口还是在ExtJS
tree组件的纸牌节点上,系统首加载时独自显示了主页功能,并不曾加载任何的事情代码。现在求点击菜单的节点,展示工作页面。

步骤:点击菜单 → 加载业务文件 → 在tab容器内呈现此业务

代码:在tree容器添加select事件

Ext.create('Ext.tree.Panel', {
    title: '目录',
    root: {
       expanded: true,
       children: [
           {
               text: '业务',
               expanded: true,
               children: [
                   { text: '船舶管理', id: 'ShipMgr.ShipMgrP', leaf: true },
               ]
           }
       ]
    ,
    listeners: {
        select: function (thisView, thisControl) {
            if (thisControl.data.leaf) {
                var tabId = thisControl.data.id;
                // 1.设置tab页的默认参数
                var tabConfig = {
                    closable: true,
                    title: thisControl.data.text,
                    id: tabId,
                    bodyBorder: false,
                    border: false,
                    icon: 'tab.png'
                };

                // 2.判断是否已存在此Tab,若存在就显示
                var newTab = Ext.getCmp('app_tabContainer').getComponent(tabId);
                if (!newTab) {
                    // 2.1 加载业务文件
                    var tabPath = 'app.' + tabId; // 界面路径 eg:app.ShipMgr.ShipMgrP
                    Ext.syncRequire(tabPath, function () {
                        newTab = Ext.create(tabId, tabConfig);
                        Ext.getCmp('app_tabContainer').add(newTab);
                        Ext.getCmp('app_tabContainer').setActiveTab(newTab);
                    });
                } else {
                    // 2.2 已存在此业务的tab页就直接设置active
                    Ext.getCmp('app_tabContainer').setActiveTab(newTab);
                }
            }
        }
    }  
})

 

1.2 主页布局分析

因地方的主页布局图,可易现实待结构:

header:存放系统的称号、logo、用户信息相当情节。

menu:菜单区域,以Tree形态展现业务入口。

tab:业务区域,具体的事务还以tab页的款式嵌入至者区域。

葡京在线开户 2

 

1.3 主页布局代码

自ExtJS 4开始,应用程序的入口点开始以呢 Ext.application。

斯措施取代了事先的Ext.onReady(),并增了一部分初的效应:创建一个viewport组件、设定应用程序的名称等等。

API:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Application

Ext.application({
    name: 'AKApp',
    launch: function () {
        // 设定Viewport
        Ext.create('Ext.container.Viewport', {
            name: 'MainFrame',
            layout: 'border',
            items: [
                Ext.create('Ext.panel.Panel', { // header
                    width: '100%',
                    height: 50,
                    bodyBorder: false,
                    border: false,
                    region: 'north',
                    style: {
                        background: '#739b2e'
                    },
                    html: '<div id="header_content">ExtJSDemo</div>'
                }),
                Ext.create('Ext.tree.Panel', { // menu
                    title: '目录',
                    id: 'app_tree',
                    rootVisible: false,
                    lines: false,
                    split: true,
                    width: '20%',
                    region: 'west',
                    root: {
                        expanded: true,
                        children: [
                            {
                                text: '业务',
                                expanded: true,
                                children: []
                            },
                            {
                                text: 'Demo',
                                expanded: true,
                                children: [
                                    { text: '创建组件', id: 'Demo.CreateCompareP', leaf: true },
                                    { text: '查找组件', id: 'Demo.QueryCompareP', leaf: true },
                                ]
                            }
                        ]
                    },
                    listeners: {
                        select: function (thisView, thisControl) {
                            if (thisControl.data.leaf) {
                  // TODO:点击菜单,创建相关的Tab页
                            }
                        }
                    }
                }),
                Ext.create('Ext.tab.Panel', { // tab
                    id: 'app_tabContainer',
                    region: 'center',
                    autoScroll: true,
                    defaults: {
                        autoScroll: true,
                        bodyPadding: 4,
                        closable: true  //tab页的关闭按钮
                    }
                }),
            ]
        });
    }
});

  

2.2 业务tab页的切换,修改页面URL的值

说明:此意义要用来因URL直接看具体的业务额,当然访问之前最好好还要做生权限判断。

步骤:新建或切换tab页 → 选中菜单的节点 → 修改页面URL

代码:在tab容器添加tabchange事件

Ext.create('Ext.tab.Panel', {
    id: 'app_tabContainer',
    region: 'center',
    autoScroll: true,
    listeners: {
        tabchange: function (thisControl, newCard, oldCard) {
            var tabId = newCard.id;
            // 1.选中菜单的节点
            var node = Ext.getCmp('app_tree').store.getNodeById(tabId);
            if (node) {
                Ext.getCmp('app_tree').getSelectionModel().select(node);
            } else {
                Ext.getCmp('app_tree').getSelectionModel().select(0);
            }

            // 2.修改url
            if (oldCard) {
                history.pushState('', '', location.href.split('#')[0] + '#' + newCard.id);
            }
        }
    }
}),

 

 

本篇开始多建筑一个ExtJS 4.2单页面应用,
这里先介绍主页的搭建,内容囊括:主页结构说明、扩展功能等地方。

目录

1.
主页结构说明

  1. 壮大功能

  2. 在线演示