Viewport学习笔记(一)

最新推荐文章于 2022-02-24 14:17:10 发布
最新推荐文章于 2022-02-24 14:17:10 发布
阅读量2.5k 收藏
点赞数
分类专栏： VS2010.net MVC+EXTJS4 文章标签： email function html iframe border header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lonestar555/article/details/7104504
版权 
 <script type="text/javascript">
        //---------------------------------------
        var myData1 = [
        ['<table border="0"><tr><td><img src=\'../../Components/Image/077_AddFile_32x32_72.png\' /></td><td style="font-size:16px" valign="middle">操作菜单1</td></tr></table>', '操作菜单1'],
        ['<table border="0"><tr><td><img src=\'../../Components/Image/125_FullView_32x32_72.png\' /></td><td style="font-size:16px" valign="middle">操作菜单操作菜单操作菜单操作菜单操作菜单2</td></tr></table>', '操作菜单2'],
        ['<img src=\'../../Components/Image/125_FullView_32x32_72.png\' />操作菜单3', '操作菜单3'],
        ['<img src=\'../../Components/Image/327_Options_32x32_72.png\' />操作菜单4', '操作菜单4'],
        ['<img src=\'../../Components/Image/replace_folder.png\' />操作菜单5', '操作菜单5'],
        ['<img src=\'../../Components/Image/112_RefreshArrow_Blue_32x32_72.png\' />操作菜单6', '操作菜单6'],
        ['<img src=\'../../Components/Image/075b_UpFolder_32x32_72.png\' />操作操作菜单操作菜单操作菜单操作菜单操作菜单7', '操作菜单'],
        ['<img src=\'../../Components/Image/305_Close_32x32_72.png\' />操作菜单8', '操作菜单7'],
        ['<img src=\'../../Components/Image/075b_UpFolder_32x32_72.png\' />操作菜单9', '操作菜单'],
        ['<img src=\'../../Components/Image/126_Edit_32x32_72.png\' />操作菜单10', '操作菜单'],
        ['<img src=\'../../Components/Image/paste_32x32.png\' />操作菜单11', '操作菜单'],
        ['<img src=\'../../Components/Image/paste_32x32.png\' />操作菜单12', '操作菜单'],
        ['<img src=\'../../Components/Image/paste_32x32.png\' />操作菜单13', '操作菜单'],
        ['<img src=\'../../Components/Image/paste_32x32.png\' />操作菜单14', '操作菜单'],
        ['<img src=\'../../Components/Image/paste_32x32.png\' />操作菜单15', '操作菜单'],
        ['<img src=\'../../Components/Image/075b_UpFolder_32x32_72.png\' />操作菜单16', '操作菜单']
                     ];
        var store1 = Ext.create('Ext.data.ArrayStore', {
            fields: [
           { name: 'MenuName' },
           { name: 'MenuID' }
        ],
            data: myData1
        });
        var grid1 = Ext.create('Ext.grid.Panel', {
            store: store1,
            columnLines: true, //显示列线
            title: '',
            hideHeaders: true, //隐藏头
            autoScroll: true,
            //maintainFlex: true,
            height: 300,
            viewConfig: { stripeRows: false }, //单双行不同颜色
            columns: [
            {
                flex: 1,
                height: 100,
                tdCls: 'MenuCls',
                //align: 'center',
                dataIndex: 'MenuName'
            },
            {
                hidden: true,
                hideMode: 'visibility',
                dataIndex: 'MenuID'
            }

        ],
            listeners: {
                //                selectionchange: function (model, records)
                //                {
                //                    if (records[0])
                //                    {
                //                        alert(records[0]); 
                //                        //this.up('form').getForm().loadRecord(records[0]);
                //                    }
                //                },
                itemclick: function (v, record, item, index, e) {
                    alert(record.get('MenuID'));
                }
            }
        });
        //------------------------------------------------
        var myData2 = [
        ['查询菜单1'],
        ['查询菜单2'],
        ['查询菜单3'],
        ['查询菜单4'],
        ['查询菜单5'],
        ['查询菜单6'],
        ['查询菜单7']
                     ];
        var store2 = Ext.create('Ext.data.ArrayStore', {
            fields: [
           { name: 'MenuName' }
        ],
            data: myData2
        });
        var grid2 = Ext.create('Ext.grid.Panel', {
            store: store2,
            columnLines: false,
            title: '',
            hideHeaders: true,
            // height: 350, 
            viewConfig: { stripeRows: true },
            columns: [{
                width: 200,
                dataIndex: 'MenuName'
            }
        ],

            listeners: {
                itemclick: function (v, record, item, index, e) {
                    alert(record.get('MenuName'));
                }
            }
        });
        //------------------------------------------------
        var myData3 = [
        ['退出']
                     ];
        var store3 = Ext.create('Ext.data.ArrayStore', {
            fields: [
           { name: 'MenuName' }
        ],
            data: myData3
        });
        var grid3 = Ext.create('Ext.grid.Panel', {
            store: store3,
            columnLines: false,
            title: '',
            hideHeaders: true,
            // height: 350, 
            viewConfig: { stripeRows: true },
            columns: [{
                width: 200,
                dataIndex: 'MenuName'
            }
        ],

            listeners: {
                itemclick: function (v, record, item, index, e) {
                    alert(record.get('MenuName'));
                }
            }
        });
        //--------------------------------------------
        Ext.define('MyApp.view.ui.MyPanel', {
            extend: 'Ext.panel.Panel',
            //renderTo: Ext.getBody(),
            //height: 160,
            html: '周一(12月26日)人民币兑美元汇率一度飙至17年来最高点，<br>主要归因于市场揣测决策层将容忍通胀，<br>以阻止国际资金外流。<br>\n\n中国人民银行今天将人民币兑美元汇率中间价调高0.07%，<br>至6.3167元人民币兑1美元，<br>人民币连续第2天走高。<br>\n\n中国社会科学院金融研究所研究员易宪容今天在《中国日报》评论中表示，<br>人民币贬值恐造成资金外流。\n\n招商银行驻深圳资深分析师刘东亮指出，<br>“人民币兑美元今天的中间价，<br>显示出中国央行推动人民币升值的决心。”<br>\n\n中国外汇交易中心报导，北京时间上午10时22分，<br>人民币兑美元扬升0.12%<br>，报6.3290元人民币兑1美元，<br>创下1993年底统一官方与市场汇率以来最高水平 。<br>\n\n人民币12个月无本金交割远期外汇(NDF)报6.3790元人民币兑1美元，<br>23日则报6.3835元人民币。<br>根据数据，<br>该期货比境内人民币现货价格低0.8%。<br>人民币在香港离岸市场变化不大，<br>报6.3450元人民币。<br>\n\n东方汇理银行(Credit Agricole)驻香港策略师Dariusz Kowalczyk此前在研究报告中写道，<br>以小幅、正面溢价购买离岸人民币有助人民币国际化，<br>而推进人民币国际化是人行的首要目标。<br>周一(12月26日)人民币兑美元汇率一度飙至17年来最高点，<br>主要归因于市场揣测决策层将容忍通胀，<br>以阻止国际资金外流。<br>\n\n中国人民银行今天将人民币兑美元汇率中间价调高0.07%，<br>至6.3167元人民币兑1美元，<br>人民币连续第2天走高。<br>\n\n中国社会科学院金融研究所研究员易宪容今天在《中国日报》评论中表示，<br>人民币贬值恐造成资金外流。\n\n招商银行驻深圳资深分析师刘东亮指出，<br>“人民币兑美元今天的中间价，<br>显示出中国央行推动人民币升值的决心。”\n\n中国外汇交易中心报导，<br>北京时间上午10时22分，<br>人民币兑美元扬升0.12%， ',
            width: 301,
            autoScroll: true,
            title: 'My Panel', 
            initComponent: function () {
                var me = this;

                me.callParent(arguments);
            }
        });
        var testPanel = new MyApp.view.ui.MyPanel();
        //------------------------------------

        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: { 'items': [
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
{ "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555--222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
    ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        Ext.define('MyApp.view.ui.MyPanel2', {
            extend: 'Ext.panel.Panel',
            //autoScroll: true,
            title: 'My Panel',
            autoScroll: true,
            initComponent: function () {
                var me = this;

                Ext.applyIf(me, {
                    items: [
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                   
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                            { header: 'Name', dataIndex: 'name' },
                            { header: 'Email', dataIndex: 'email', flex: 1 },
                            { header: 'Phone', dataIndex: 'phone' }
                        ],
                    viewConfig: {}
                }
            ]
                }); 
                me.callParent(arguments);
            }
        });
        var testPanel2 = new MyApp.view.ui.MyPanel2();
        //---------------------------------
        var vp;
        Ext.onReady(function () {
            //Viewport布局面板,以下布局为南北布局方式  
            vp = new Ext.container.Viewport({
                layout: "border",         //布局方式占满整个浏览器  
                renderTo: Ext.getBody(), //呈现在整个body  
                items: [
                    {
                        //title: "",
                        frame: true,
                        region: "center",  //呈现在最中间  
                        margin: 3,
                        xtype: 'tabpanel',
                        id: 'tabPanel',
                        activeTab: 0,
                        items: [
                             { title: '菜单1',
                                 itemid: 'menu1',
                                 xtype: "textfield",
                                 fieldLabel: 'Name',
                                 allowBlank: false
                             }
                             , testPanel, testPanel2
                        //,

                        //                                                {title: 'Tab 2', text: "我是中间儿子里面的按钮1", width: 200, xtype: "button" },
                        //                                                {title: 'Tab 3', text: "我是中间儿子里面的按钮2", width: 200, xtype: "button" }
                        // {title: '下单', html: ' <iframe name="iframeCenter" scrolling="auto" frameborder="0" width="100%" height="650" src="/Order/DoXHOrder"> </iframe>' },
                        // { title: '使用帮助', html: 'The first tab\'s content. Others may be added dynamically' }
                        ]
                    },
                        {
                            title: "我是上面的儿子",
                            frame: true,
                            region: "north",  //呈现在北边，即是上边  
                            height: 100,
                            collapsible: true //是否可以收缩  
                        },
                    {
                        title: "导航菜单",
                        frame: true,
                        region: "west", //呈现在西边，即是左边  
                        width: 200,
                        margin: "3 0 3 0",
                        collapsible: true, //是否可以收缩  
                        resizable: true,
                        stateId: 'navigation-panel',
                        id: 'west-panel', // see Ext.getCmp() below
                        split: true,
                        minWidth: 175,
                        maxWidth: 200,
                        animCollapse: true,
                        layout: 'accordion',
                        items: [
                        //{ html: ' <iframe name="iframeLeftMenu" scrolling="auto" frameborder="0" width="100%" height="600" src="/Home/LeftMenu"> </iframe>' }
                                            {
                                            //contentEl: 'grid-example',
                                            title: '操作',
                                            items: [grid1],
                                            iconCls: 'nav' // see the HEAD section for style used
                                        }, {
                                            title: '查询',
                                            items: [grid2],
                                            //html: '<img src=\'../../Components/Image/Move.png\' />', 
                                            iconCls: 'info'
                                        }, {
                                            title: '系统',
                                            items: [grid3],
                                            //html: '<p>Some info in here.</p>',
                                            iconCls: 'settings'
                                        }
                            ]
                    },
                    {
                        //                        title: "我是右边的儿子",
                        frame: true,
                        region: "east", //呈现在东边，即是右边  
                        width: 200,
                        margin: "3 0 3 0",
                        items: [
                        //{ html: ' <iframe name="iframeRightMRS" scrolling="auto" frameborder="0" width="100%" height="600" src="/Home/RightMRS"> </iframe>' }
                        {html: '呈现在东边，即是右边' }
                        ]
                    },
                    {
                        //title: "我是下面的儿子",
                        frame: true,
                        region: "south", //呈现在南边，即是下边  
                        height: 100,
                        items: [
                        //{ html: ' <iframe name="iframeBottom" scrolling="auto" frameborder="0" width="100%" height="100" src="/Home/BottomInfo"> </iframe>' }
                        {html: '呈现在南边，即是下边  ' }
                        ]
                    }
                ]
            });

            // grid2.getSelectionModel().select(0);
            // grid2.fireEvent('itemclick', grid2, grid2.getSelectionModel().getLastSelected()); 

        });  

    </script>

菜单没贴上来,将在笔记二中贴上

长江
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
10-30
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
web前端手册
caiqian97的博客
08-28 1576
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
Html开发之viewport的使用
LCore的专栏
10-31 2726
近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试在移动终端上的效果。 调试工具      首先我们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入如下的界面:       接下来点击右下方圈红的
移动端适配 - viewport
liuj4 | 自娱自乐
09-19 196
viewport是移动端适配时常用的属性，经常能看到下面这样的标签 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=...
EXT--使用Ext.container.Viewport结合表格布局
开发者博客
09-29 352
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件...
weixin_30746117的博客
12-20 156
《回到系列目录 本篇讲解三个容器类控件。 一、面板控件 Ext.Panel 一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项： 1.title:设置面板标题文本。 2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。 3.html，item...
Bootstrap栅格系统学习笔记
11-27
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。 2、栅格...
入门基础学习 ExtJS笔记（一）
01-19
大致看了几天的书籍 查阅了API。头脑里也记不下多少，学习还是动手比较好。就试着开始写写： 首先：开始搭个 界面... [removed][removed] [removed][removed] 定义一个Ext.Viewport： 在items的属性里设置： 头部： 代
前端主流框架vue学习笔记第一篇
12-10
vue应该是前端主流框架中的集大成者，它吸取了knockout，angular，react设置avalon的经验，支持各种模式写法，入门很简单，从本章开始，会记录学习vue中的点点滴滴，以笔记的形式形成博文。 1、Hello World 和任何...
前端学习（38）：css颜色小练习
歌谣的博客
12-07 337
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Ext Js入门第10篇-使用Ext.container.Viewpost整体布局
qq_29258777的博客
05-26 331
Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局 Ext.onReady(function() { //创建一个TreeStore，TreeStore负责为Tree提供数据 var store=Ext.create('Ext.data.TreeStore',
Extjs4.2布局——Ext.container.ViewportView
weixin_33724046的博客
12-12 244
先贴出官方文档的关于此布局的描述：“ 一个专门的容器用于可视应用领域（浏览器窗口）. Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport。 任何的Container容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局layo...
iframe使用总结:
XL202108041100的博客
02-24 214
<!-- 左侧导航 给左侧 设置target="mainiframe ，iframe设置 name="mainiframe" 点击左侧，右侧自动变化 --> <ul> <li> <dl class="cml_label"> <dd><label> <a href="/enterpris...
ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
weixin_34417814的博客
03-05 178
  Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样，它会随着浏览器的高度和宽度的变化而变化。 Panel 布局时需要提供一定的高度和宽度值，这个值是固定的，它不会随着浏览器的变化而变化。 接下来，我来演示下，这两者布局的差异，也是我在工作时遇到的问题然后解决之： html: &lt...
浅谈meta viewport设置移动端自适应
热门推荐
筱葭的博客
03-06 5万+
1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为
移动端html 头部header代码示范
武当山道士的博客
07-22 1万+
"> //清缓存 //电话号码不显示为拨号连接； // 网站开启对web app的支持 //顶部状态条的样式 default 白色 black 黑色 black-translucent:半透明（若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px））
CSS Viewport 单位，很多人还不知道使用它来快速布局！
粉丝们务必加入微信粉丝群
07-01 3363
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScrip...
viewport
最新发布
06-02
Viewport是指网页在浏览器中显示的区域大小，也就是浏览器窗口中能够看到的网页部分。在网页开发中，可以通过设置viewport的大小来适配不同的设备屏幕尺寸，以达到更好的用户体验。常见的设置方法是通过meta标签的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值