使用Extjs组件实现Top-Left-Main布局并且增加事件响应

每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Left-Main.如图所示: 在平常的接触中,也见到了很多类似的前端框架,例如smartadmin,bootstrap-admin等,在今天我给大家介绍一种更加简洁的构建方式. 项目源码地址:https://github.com/zhangxy1035/extjs 参考资料:http://extjs-d…

ExtJS 4.2 教程-08：布局系统详解

ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用Ext.define自定义类 ExtJS 4.2 教程-04:数据模型 ExtJS 4.2 教程-05:客户端代理(proxy) ExtJS 4.2 教程-06:服务器代理(proxy) ExtJS 4.2 教程-07:Ext.Direct ExtJS 4.2 教程-08:布局系统详解今天我们来对…

无废话ExtJs 入门教程十六[页面布局：Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:…

Android四大组件之Activity(活动)及其布局的创建与加载布局

Android四大组件之Activity(活动)及其布局的创建与加载布局什么是Activity ? 活动(Activity)是包含用户界面的组件,主要用于和用户进行交互的,一个应用程序中可以包含零个或多个活动. 手动创建Activity的过程详解到现在为止,你还没有手动创建过活动呢,在第一个安卓工程中,HelloWorldActivity是ADT帮我们创建的,手动创建活动可以加深我们的理解,因此现在是时候应该自己动手了. 首先,你需要再新建一个 Android 项目,项目名可以叫做 Acti…

Element 2 组件源码剖析之布局容器

0x00 简介前文分析过组件的布局栅格化(Grid Layout) ,通过基础的 24 分栏,迅速简便地创建布局. 本文将介绍用于布局的容器组件,使用 Flexbox 功能将其所控制区域设定为特定的布局,方便快速搭建页面的基本结构.本文将深入分析组件源码,剖析其实现原理,耐心读完,相信会对您有所帮助. 组件文档更多组件剖析详见 Element 2 源码剖析组件总览 . 0x01 布局容器布局容器提供5个组件,支持多层嵌套,方便快速搭建页面的基本结构: <el-container>:布局…

Container容器控件的使用、Hbox与Vbox布局管理器的使用、以及AjaxAction前后台事件响应

1.由于有前后台交互功能,需要在Spring上下文中注册一个用于提供服务的bean,对于这个bean使用Spring提供的@Component标注,如果需要使用@Component注解,需要在项目中WebContent->WEB-INF->dorado-home目录下的app-context.xml文件中增加一个配置,配置如下:<context:component-scan base-package="com.bstek.dorado.sample"/> 2.C…

基于Vue的事件响应式进度条组件

写在前面找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 事件响…

Unity Event Trigger 事件响应（二维，三维）添加组件

EventTrigger 上主要的方法有PointerEnter.PointerExit.PointerDown.PointerUp.PointerClick............都会显示在面板上面: 在UGUI上响应EventTrigger事件所有的事件响应都需要在响应的UGUI上面挂载 Selectable,然后通过添加组件EventTrigger进行响应事件. UI默认有响应事件的如:Button Toggle 等不需要进行添加,因为事件响应组件都继承自Selectable 2.…

ExtJS中layout的12种布局风格

总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, 7. fit,8. form 9.table. 一共9种. 另外几种见: http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html 里面有详细的例子. 1. absolute 顾名思义,在容器内部…

第34天学习打卡（GUI编程之组件和容器 frame panel 布局管理事件监听多个按钮共享一个事件）

GUI编程组件窗口弹窗面板文本框列表框按钮图片监听事件鼠标键盘事件破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境为什么要学习GUI: 1.可以写出自己心中想要的一些小工具 2.工作时,也可能需要维护到swing界面,概率极小! 3.了解MVC架构,了解监听 2.AWT(抽象的窗口工具) 2.1 Awt介绍 1.包含了很多类和接口! GUI:图形用户界面 2.元素:窗口,按钮, 3.java.awt 2.2组件和容器 1 Fr…

extjs组件添加事件监听的三种方式

extjs对组件添加监听的三种方式在定义组件的配置时设置如代码中所示: Java代码 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'blur':function(){ alert(1)…

ExtJS组件的xtype属性列表

ExtJS的应用界面是由很多小部件组合而成的,这些小部件被称作“组件(Component)”,所有组件都是Ext.Component的子类,Ext.Component提供了生命周期管理包括初始化.渲染.大小和尺寸管理.销毁等功能,这使得所有Ext.Component的子类都自动分享了这些能力.ExtJS提供了各式各样丰富的组件,每一个组件都很容易被扩展创建成自定义组件. 每个组件都有一个代称叫做xtype,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. 大的应用中,由于使用的方式有…

Javascript - ExtJs - 组件 - 分页

服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据. , name: "sam" } ] } 准备: CREATE PROCEDURE [dbo].[usp_PagingLarge] @TableNames VARCHAR(2000) , --表名,可以是多个表,但不能用别名 @PrimaryKey VARCHAR(100) , --主键,可以为空,但@Order为空时该值不能为空 @Fields VARCHAR(400…

ExtJS组件扩展

1.extends 2.initComponent 3.constracot: 4.onRender:重新写这个方法 ============================================================= ExtJS核心: 1.与后台交互: Store(本质就是发出Ajax请求,之后把返回的数据存在store里面的data属性里面) 2.UI组件与store进行绑定 tpl数据展现模板(自定义) 3.owner以及EL组件获取,doLayout重新构建DOM…

ExtJS 4 MVC Viewport和card布局

http://ext4all.com/post/a-little-bit-strange-navigation 效果图: app/view/Viewport.js Ext.define('App.view.Viewport', { extend: 'Ext.container.Viewport', layout: 'border', items: [ { itemId: 'menu', region: 'west', collapsible: true, title: 'Menu', widt…

extjs layout 最灵活的页面布局样式

当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody(), title:'容器组件', height:200, width:500, layout:{ columns:3, //列数 type:'table' //表格类型 }, items:[{ title:'子元素1', html:'这是子元素1中的内容', , //纵跨两列 height:100…

[转]extjs组件添加事件监听的三种方式

原文地址:http://blog.csdn.net/y6300023290/article/details/18989635 1.在定义组件配置的时候设置 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'blur'…

Extjs 组件继承模板说明（同GridPanel案件）

1. 重写initComponent()方法,并在该方法在调用父类的initComponent()方法. 如:subclass.superclass.initComponent.call(this); 2. 在initComponent中,出现以下语句,覆盖父类属性 Ext.apply(this, { title : "aaa" }); 3. 基本模板代码例如以下: Ext.ns("my.component"); my.component.MyGridPanel…

54. Extjs组件render说明

转自:http://blog.chinaunix.net/uid-450400-id-2119168.html 1. 1.调用组件的render方法 panel.render('div'); 2.在配置中指定 renderTo 属性 renderTo:'div', 3.配置中指定 applyTo ,这将把元素呈现到该属性的父元素上 applyTo:'divChild', 4.通过指定 el 属性,指定后调用 render 方法 el:'div' panel.render(); 5.通过调用 sh…

Extjs 组件共用（单例）问题

说明: 将store初始化在类定义时便创建, store实例将成为该类的单例代码: 测试: 说明: 将store初始化放入initComponent函数中. 每次都将创建一个新的实例. 代码: 测试结果:…

ExtJs 添加员工实例 ---- 锚点布局 anchor 可自动伸缩

代码如下: <script type="text/javascript"> Ext.onReady(function () { // 创建一条记录行, job 为 displayField 名称 var JOB = Ext.data.Record.create([{ name: "job"}]); new Ext.Window({ title: "添加人员", width: 500, height: 350, layout: &quo…

Sagit.Framework For IOS 开发框架入门教程3：Start引导页及框架布局和隐藏事件的内幕

前言: 框架依旧在快速更新着:在重构.简化代码,统一标准的过程中. 中间也遇到各种坑,不过好在一步一脚印的解决了. 虽然还有些功能还在思考,不过教程,还是得补上: 上篇文章:Sagit.Framework For IOS 开发框架入门开发教程2:一行代码实现引导页里面讲到,引导完后,根据是否存在的Token来解决跳转到StartController还是MainController. 这篇就写写StartController,实现的代码虽少,但原理很精彩!!! Sagit 实现登陆注册引导页从…

css实现网页布局随滚轮变化响应移动

_position:absolute; _top:expression(eval(document.documentElement.scrollTop)); 1.第一句代码 _position:absolute; 这句代码的意思是“位置:绝对定位”,也就是说元素的位置是相对于整个浏览器窗口的,而不是相对于父元素.一般要配合top.left属性使用. 2.第二句代码 _top:expression(eval(document.documentElement.scrollTop)); top属性是定…