Study ExtJS 4.x

Before we start:

1.  All my knowledge comes from Internet and I will try my best to present the reference link。

2.  I would be glad if u could join me with the same topic.

3.  I am green hand, really..

4.  never code for u , u code for urself.(I give u my pics never codes)

Content:

1. Start with a fine demo.    -----2014/10/11

2.

Now We Begin:

1. A fine Demo with extjs.

what is extjs?

JavaScript Framework for building Rich Desktop Web Applications.(一句话:把网页做的丰富的像桌面程序那样)

I recommend you to use Firefox as a dev tool.

also we need extjs 4.x  (please go to ......download your extjs 4.x)

(recommend: pls use version4.2,if there is any new version like 5.x, we will see it in a future article  )

create a new folder "demo1" in which create another folder "extjs" and a html file "HelloWorld.html"

copy this to your newly created folder "extjs"

write these code in helloworld.html

key file:  (1 css file and 1 js file)

1.  extjs/resources/css/ext-all.css

2. bootstrap.js

Have a look at what happends..(run helloworld.html)

what we get?

A beautiful UI(or ...) for web applications which is amazing and attractive.

what we really get?

1. css

2. javascript

3. pics in html or other sources in html.

(this framework has done all I could think in web view layer, at least now , I believe so)



Study ExtJS 4.x

时间: 2024-08-01 22:41:09

Study ExtJS 4.x的相关文章

学习EXTJS6(5)基本功能-进度条组件

Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项:   配置项 类型 说明 renderTo String 指定页面上已经存在的元素or元素id,该元素成为新组件的容器 height Number   width Bunber   cls String 一个可选的样式表扩展常用于自定义式样.默认是空 <!DOCTYPE html> <html> <head> <meta http-

extjs布局(一)

Ext常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式,满足开发者需求.那么我们就其中常用的方式逐一介绍. Border布局 Border布局是Ext中常用布局方式(经常用到整个页面的总体布局),感觉用的几率很大.在看代码之前先熟悉一种特殊的容器ViewPort,它是对于浏览器视窗的抽象,你可以将它理解为浏览器的可见区域,它将渲染到document.body并自动调整大小,一个页面只能创建一个Viewport. var pnNorth=new Ext.Panel({ id:'p

Extjs 4.2 设置buttontext为中文

可以在Ext.QuickTips.init();后加入如下代码: Ext.MessageBox.buttonText = { ok : "确定", cancel : "取消", yes : "是", no : "否" }; Extjs 4.2 设置buttontext为中文,布布扣,bubuko.com

ExtJs基础知识总结:弹窗(四)

概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌套到widget.window,然后随着widget.window的show方法展示到页面上哪?下面有几种方案思路 思路一.直接将gridpandel填充到widget.window对应的Items 代码如下: var InvoiceItemGrid = Ext.create('Ext.grid.P

ExtJs布局之viewport

<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/

ExtJS如何取出某个DIV中的内容

在使用ExtJS的时候,不免我们要在某个DIV中取出DIV的内容,因此通过查找api和相关资料应该向如下方式进行取值 1 Ext.onReady(function(){ 2 var panel = new Ext.Panel({ 3 title:'Ext.core.domhelper.applystyles示例', 4 width:300, 5 height:200, 6 renderTo:'sub1', 7 html:"<div id='div1' style='height:160px

ExtJS实例1

1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本 窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒 主页面: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../../extjslib/resources/css/ext-all.css"

ExtJS实现Excel导出

1. 使用POI组件实现excel导出功能 //获取问题列表 List<Suggestion> targetStockList = suggestionService.getSuggestionList(map);           //创建一个新的Excel         HSSFWorkbook workBook = new HSSFWorkbook();         //创建sheet页         HSSFSheet sheet = workBook.createSheet

SHELL STUDY....tr的用法

一般我们使用tr来做字符串的替换,或者删除指定的字符串 tr的语法如下: tr [OPTION]... SET1 [SET2] -c, -C, --complement first complement SET1 将非SET1中的字符替换为SET2 [[email protected] ~]$ echo "lubinsu" | tr -c "l" "A" lAAAAAAA -d, --delete delete characters in SET