ExtJS 4.2 业务成本(一)主页搭建

PAT 1080. MOOC期终成绩

对此在中夏族民共和国民代表大会学MOOC(http://www.icourse163.org/)学习“数据结构”课程的学童,想要获得一张合格证书,必须首先取得不少于200分的在线编制程序作业分,然后总评获得不少于伍十五分(满分100)。总评成绩的总计公式为
G = (G期中x 4/10 + G期末x 五分三),假若 G期中 > G期末;不然总评 G 就是G期末。那里 G期中 和 G期末 分别为学生的期中和前期成绩。

现行反革命的标题是,每一遍考试都发生一张独立的战绩单。本题就请您编写程序,把分歧的战表单合为一张。

输入格式:

输入在首先行提交2个整数,分别是
P(做了在线编制程序作业的学员数)、M(参与了期初级中学完成学业生升学考试试的上学的小孩子数)、N(加入了期末考试的上学的儿童数)。每一种数都不超过一千0。

接下去有三块输入。第2块包括 P 个在线编制程序成绩 G编制程序;第一块包涵 M
个期初级中学完成学业生升学考试试战表 G期中;第壹块包涵 N 个期末考试成绩G期末。每种成绩占一行,格式为:学生学号
分数。在那之中学生学号为不超越21个字符的英文字母和数字;分数是非负整数(编制程序总分最高为900分,期四之日末代的参天分为100分)。

出口格式:

打字与印刷出获得合格证的学生名单。每一种学生占一行,格式为:

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

若果有些成绩不设有(例如某人没加入期初级中学结束学业生升学考试试),则在相应的岗位输出“-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

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

说明:各业务的入口都以在ExtJS
tree组件的纸牌节点上,系统第Nokia载时只呈现了主页功用,并不曾加载任何的事情代码。今后供给点击菜单的节点,呈现工作页面。

步骤:点击菜单 → 加载业务文件 → 在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);
                }
            }
        }
    }  
})

 

分析

一看那道题的时间100ms,
就相应用scanf,printf读入和出口了节省时间,第3,不要用查找操作最后动用顺序容器或然map的下标来探寻,节省时间,在那题中map
起到了将每一种学员的string也许字符串格局的id与仓库储存学生音讯的数组的下标联系了四起,即能够用id直接得到了相应的上学的儿童的音信;

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

说明:此意义首要用于依照U奥迪Q5L直接待上访问具体的业务额,当然访问从前最棒还要做下放权力限判断。

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

代码:在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);
            }
        }
    }
}),

 

 

代码如下

#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

 

1. 主页结构表明

本篇开端搭建二个ExtJS 4.2单页面应用,
那里先介绍主页的搭建,内容囊括:主页结构表达、扩大作用等方面。

2. 扩乌索能

此间表明主页常见的2种效应:

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

第2种:业务tab页的切换,修改页面U路虎极光L的值。

3. 在线演示

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

 

End

Web开发之路类别小说

菜单加载中…

1.3 主页布局代码

从ExtJS 4开头,应用程序的入口点开首应用为 Ext.application。

此方法取代了事先的Ext.onReady(),并追加了一部分新的效果:创设二个viewport组件、设定应用程序的名称等等。

APIhttp://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页的关闭按钮
                    }
                }),
            ]
        });
    }
});

  

1.2 主页布局分析

基于上边的主页布局图,可转移现实试图结构:

header:存放系统的名目、logo、用户信息等内容。

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

tab:业务区域,具体的作业都以tab页的花样嵌入到此区域。

图片 2

 

目录

1.
主页结构表明

  1. 恢宏成效

  2. 在线演示