EXT4 JS 生成主页面（利用 Sencha工具）（step 1）

最新推荐文章于 2017-07-22 22:26:58 发布
最新推荐文章于 2017-07-22 22:26:58 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yeness/article/details/9445859
本文详细介绍了如何使用Sencha Architect创建基于ExtJS 4.2.X的应用布局，包括Viewport、顶部、左侧导航、中间及底部区域的具体配置步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文档（配图）下载地址：http://download.youkuaiyun.com/detail/yeness/5805181

一、新建项目，打开SenchaArchitect,选择Ext JS 4.2.X

二、建立 “Viewport” (整个版面)

加载后，分别设置id与layout属性

Id:MyViewport

Layout:border

设置效果如下：

三、建立顶部占位符

设置占位符的属性 id、region

Id:MyNorth

Region:North

ContentEL:divNorth

转换 container 为panel ，xtype:panel

 

四、设置左侧导航占位符

设置以下属性：

region: 'west',

stateId: 'MyWestStateID',

id: 'MyWest',

title: '菜单',

split: true,

width: 200,

minWidth: 200,

maxWidth: 400,

collapsible: true,

animCollapse: false,

margins: '0 0 0 5'

 

转换 container 为panel ，xtype:panel

 

五、添加中间占位符

region: 'center',

    deferredRender: false,

    activeTab: 1

 

六、生成底部占位符

region: 'south',

contentEl: 'south',

split: true,

height: 100,

minSize: 100,

maxSize: 200,

collapsible: true,

collapsed: true,

title: '版权信息技术支持',

margins: '0 0 0 0'

 

七、运行前

在body内加入以下代码

 

<body>

<divid="divNorth">divNorth</div>

<divid="divSouth">divSouth</div></body>

xuan.ye
关注
extjs页面布局生成器
12-10
很好的ext页面布局自动生成功能，快速布局，减少你页面开发时间！用法：解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了，代码在查看/修改中可以看到，只需复制粘贴到自己的项目即可！
使用ExtJS创建前端WebQQ界面
lee576的专栏
10-28 5883
使用ExtJS创建前端WebQQ界面，使用ASP.NET处理数据存取，为了演示方便用Sqlite3存储数据。功能概述：实现了最基础的一对一的通讯功能，实时收发信息，离线保存信息。来信自动弹出窗口。实现思路：借鉴了早些年的聊天室思想。获取聊天信息是客户端定时向服务器请求，按照发送的用户名来查询此用户是否有新信息。有信息则返回信息。如何获取？思路如下：数据库中为每个用户设置
Ext4.js mvc设计
believer123的专栏
06-14 1217
网上找了视频学了三天才终于弄成功了，mvc设计模式可是很常用的，必须的好好学，首先来看看结构图： contoller.js 代码： Ext.define('APP.controller.controller', {     extend : 'Ext.app.Controller',     models : [ 'User' ],     stores : [ 'UserStore
Ext JS 4学习教程+笔记（一）
yanqlv的专栏
06-11 2993
ExtJS 4的开发方式与ExtJS 3.x的开发有很多区别，但还兼容以往的开发方式。 1，ExtJS 4里创建一个类，推荐用Ext.define()方法，例如： Ext.define('MyApp.view.user.List', {     extend: 'Ext.grid.Panel',     alias: 'widget.userlist',     he
ext4 学习笔记（六）[Ext.js方法 ]（白鹤翔第一季）
cnsu-cmh
11-03 439
Ext.js方法详解： Ext.apply&Ext.applyIf Ext.extend typeOf isEmpty、isIterable、isFunction、isArray... Iterate Ext.apply & Ext.applyIf Ext.apply就是为对象扩展属性或方法的 var src = {name:'张三',age:20}; //源对象 v
ext-gen:Sencha ExtGen-用于Ext JS的开放工具
05-06
外生 用于构建Ext JS应用程序的CLI工具 ...Ext JS应用程序生成器CLI工具用于生成Ext JS应用程序。 安装 npm install -g @sencha/ext-gen 生成快速入门 ext-gen app -a 打开并浏览您的新应用 cd ./my-ap
Sencha ExtGen：Ext JS应用程序快速生成工具
Sencha ExtGen是一个命令行界面（CLI）工具，它用于快速生成Ext JS应用程序。Ext JS是一个用于构建交云交互式Web应用的JavaScript框架，由Sencha公司开发。它提供了一个非常丰富的UI组件库，包括各种用于数据展示、...
Sencha EXT开发工具破解版
06-01
Sencha EXT开发工具破解版 ext页面拖拽生成，本人使用熟练使用过程有问题加微信lipfwx
【前端开发框架】Sencha Ext JS 7.8+入门指南：安装、模板和组件创建详解
最新发布
05-30
内容概要：本文档《Sencha Ext JS 7.8+入门指南》旨在帮助开发者从零开始掌握Sencha Ext JS 7.8+框架。文档详细介绍了Ext JS的安装、项目创建、基本项目配置、视图和组件的使用等内容。首先，文档解释了Ext JS的特点...
sencha ext js 6 快速入门(必看)
10-22
Sencha Ext JS 6是一款先进且强大的JavaScript应用程序开发框架，它支持多平台和多设备，适用于开发复杂的数据驱动的Web应用程序。下面是关于Sencha Ext JS 6快速入门的知识点： 1. ExtJS的历史与发展： - ExtJS的...
jsp+ext4(js部分由Ext Designer生成)
01-07
1.Ext Designer生成的代码，如何使用；通过实例化来使用。 2.Ext 的model,store,grid使用,store如何接收json数据 3.form.Panel的分离，如何引用。 4.Ext.define的命名包含了namespace。 *本例子是简单的实现了一下jsp+ex4的使用，引用了: Ext.form.Panel Ext.data.Model Ext.data.Store Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ：243596252；时间允许我会帮助大家。。。
Ext js-4.1.1+Ext js-4.1.0+Ext4.1.0API中文版
11-22
Ext js-4.1.1+Ext js-4.1.0+Ext4.1.0API中文版 .
springMVC整合ext4js
07-25
springMVC整合ext4js 包括主界面代码实现； 包括主界面导航代码实现； 包括添加表单的代码实现； 希望整个权限系统完成后全部发上来；
Extjs 之主界面布局
06-09
Extjs 之主界面简单布局，适合刚刚接触ext的新手学习，就一个html页面。 现在拿来分享。
ext js 页面自动刷新教程集合
07-13
ext js 页面自动刷新教程集合 ext js 页面自动刷新教程集合
ext4js 主页面布局，动态分配菜单，并点击url 显示到内容面板中
偏执狂才能生存！热忱比专业知识更重要.........
11-05 2147
ext4js 主页面布局，动态分配菜单，并点击url 显示到内容面板中
ext4 js自定义事件（白鹤翔第一季）
cnsu-cmh
11-17 702
// 要利用观察者模式 去实现自定义的事件 //1：由于浏览器他自己能定义内置的事件(click/blur...) //  我们也应该有一个类似于浏览器这样的类，这个类 自己去内部定义一些事件(自定义事件) var Observable = function(){ //承装自己所定义的事件类型的 this.events = ['start','stop']; //我们应
【EXTJS入门】extjs 和 sencha cmd的安装
记事本
07-22 852
上一节我记录了extjs5 和sencha cmd5的下载方式，在经过前者的解压和后者的安装后还有一些后续操作，这里记录一下 首先配置一下环境变量，将你sencha cmd安装的根目录地址粘贴到 环境变量里的path中即可。 接下来打开cmd 检查一下sencha 是否安装成功 如图所示是安装成功的。 接下来我们需要安装其他的环境变量应用， 包括 java jre 和ruby ，网
extjs4简介
不了了之专栏
12-06 1580
Ext JS 4简介 Ext JS 4目前是Sencha的产品，4.x的正式版本号是4.0.7。Ext JS 4提供商业版本，但如果您的项目是开源的，则可以免费使用Ext JS 4。Ext JS的论坛目前非常活跃；Ext JS还在不但地升级改进，据Sencha官方统计，使用Ext JS的开发者数目在一百万以上。 Ext JS 4与之前版本的比较 渲染效率提高 所有类都经过调
Sencha Architect 2：Ext 4的图形化编码新选择
Sencha Architect 2 是一款由Sencha公司开发的图形化开发工具，主要面向使用Sencha Ext JS框架进行Web应用开发的开发人员。Ext JS 是一个基于 JavaScript 的开源框架，用于构建丰富的互联网应用程序（RIA），支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值