概述
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用
ExtJS文件比较大,一般用在局域网中的程序上
ExtJS的较新版本是收费的
特点:页面很炫,体积很大,适合直接使用,不适合学习
引入资源
将ext-4.2.1.883文件夹放入到项目中,然后在文件中添加
常用函数
Ext.onReady(fun)
在页面加载完成后执行fun()函数
Ext.MessageBox.alert(str1,str2)
弹出对话框,str1为标题栏标题,str2为内容
Ext类库
ExtJS 由一系列的类库组成,一旦页面成功加载了ExtJS 库后,我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能
ExtJS 的类库由以下几部分组成:
底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上
控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。
实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能
组件
概述
Ext2.0 对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组件体系,
由这些组件形成了Ext 的控件,Ext 组件是由Component 类定义,每一种组件都有一个指定的xtype 属性值,
组件的要素 类型(xtype),配置选项,属性,方法,事件
通过xtype值可以得到一个组件的类型或者是定义一个指定类型的组件。
类型
基本组件(左边为xtype值,右边为对应的类型)
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progressbar Ext.ProgressBar
slider Ext.slider.Single
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window
工具栏组件
pagingtoolbar Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
菜单组件
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
表单组件
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
图表组件
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie
创建组件
组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window()
一般都会在构造函数中通过传递一个对象来创建组件。对象包含创建组件所需要的配置选项及值
例
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source '};
var panel=new Ext.Panel(obj);
渲染组件
一般在创建组件时使用配置选项renderTo选项使组件渲染到指定的页面元素上(值为元素的id)
var obj={title:"hello",width:300,height:200,renderTo:'hello',html:'Hello,easyjf open source '};
var panel=new Ext.Panel(obj);
页面上需要存在元素:
在容器中创建子元素组件
通过给属性items 传递数组方式实现构造
第一种
var panel=new Ext.TabPanel({width:300,height:200,items:
[
{title:"面板1",height:30},
{title:"面板2",height:30},
{title:"面板3",height:30}
]});
panel.render("hello");
第二种
var panel=new Ext.TabPanel({width:300,height:200,items:
[
new Ext.Panel({title:"面板1",height:30}),
new Ext.Panel({title:"面板2",height:30}),
new Ext.Panel({title:"面板3",height:30})
]});
panel.render("hello");
对比
第一种 省略了构造函数的写法,并且可以延迟加载,在需要时再创建子元素.推荐
事件
添加事件处理函数
Ext.util.Observable类是所有支持事件的类的基类
使用Ext.util.Observable类的addListener方法为元素添加事件(addListener方法有一个别名是on)
addListener( String/Object eventName, [Function fn], [Object scope], [Object options] )
on( String/Object eventName, [Function fn], [Object scope], [Object options] )
eventName 要监听的事件的名称
fn 事件处理函数,具体函数的参数可以在具体组件的事件中查询,一般都有一个EventObject类型的参数
scope 事件处理函数执行的作用域,即函数中this指向的对象(默认为触发事件的对象)
options 选项
options对象的可选配置
scope : Object 事件处理函数执行的作用域,即函数中this指向的对象(默认为触发事件的对象)
delay : Number 事件触发后,调用事件处理函数延时毫秒数。
single : Boolean 设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。
buffer : Number 使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数不再调用, 新的事件处理函数接替。
target : Ext.util.Observable 只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数
注意
事件处理函数的参数可以在具体组件的事件中查询
一些事件可以通过在事件处理函数中返回false,阻止后续动作的发生
EventObject
Ext.EventObject表示发生事件的对象,通常作为事件响应函数的参数
方法
getCharCode( ) : Number
获取事件的字符值。
getKey( ) : Number
为事件提供一个规格化的keyCode
getTarget( String selector, Number/HTMLElement maxDepth, Boolean returnEl ) : HTMLElement
获取事件的目标对象
getX( ) : Number
获取事件x坐标
getY( ) : Number
获取事件y坐标
hasModifier( ) : Boolean
如果在此事件期间 control, meta, shift 或 alt 按下,则返回 true
preventDefault( )
阻止浏览器默认行为处理事件
stopPropagation( )
取消事件冒泡
within( String/HTMLElement/Ext.Element el, Boolean related, Boolean allowEl ) : Boolean
如果此事件的目标对象是el的子级,则返回true。除非设置allowEl参数,如果目标对象是在el,它将返回false
示例
var btn = new Ext.Button({
text: "我的按钮",
renderTo: "btn"
});
btn.on("click",function(button, eventObject){
new Ext.Window({
title: "win"+button.text,
width: 300,
height: 200
}).show();
});
组件体系
Ext.Component 组件
Ext.container.Container 容器
Ext.panel.Panel 面板
Ext.window.Window 窗口
Ext.window.MessageBox 对话框
Ext.grid.Panel 基本表格
Ext.menu.Menu 菜单
Ext.form.Panel 表单面板
Ext.toolbar.Toolbar 工具栏
Ext.container.Viewport 视图窗口
Ext.tree.Panel 树
Ext.tab.Panel 选项卡
Ext.panel.Tool 小工具
Ext.button.Button 按钮
Ext.Component
概述
Ext.Component类是所有组件的基类
配置选项
说明
在ExtJS 中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象,该对象中的信息也就是指组件的配置选项。
每一个组件除了继承基类中的配置选项以外,还会根据需要增加自己的配置选项,另外子类中有的时候还会把父类的一些配置选项的含义及用途重新定义。
常用配置选项
id : String 当前组件实例唯一的ID。
xtype : String 此属性提供了一个较短的替代全类型创建对象. 例 items: [{xtype: 'textfield',fieldLabel: 'Foo'}]
width : Number 此组件的宽度,以像素为单位。
height : Number 此组件的高度,以像素为单位。
margin : Number/String 为组件设置margin
padding : Number/String 为组件设置padding
hidden : Boolean True 将隐藏该组件。
disabled : Boolean True 将禁用该组件。
cls : String 可选的额外的CSS类将被添加到该组件的元素
html : String/Object 一个 HTML 片段, 或者一个 DomHelper 描述, 用作 layout 元素的内容
renderTo : String/HTMLElement/Ext.Element 指定元素的id, 一个DOM元素或现有的元素,这个组件将被渲染到指定元素
autoScroll : Boolean 是否在内容溢出时显示滚动条
style : String/Object 为该组件设置样式
border : Number/String 指定该组件的边框
shadow : String/Boolean 定义浮动组件是否应该有阴影效果
shadowOffset : String/Boolean 阴影效果偏移的像素值.
floating : Boolean 指定为'true'的时候浮动组件以外的文档流中使用CSS绝对定位。
listeners : Object 一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。
autoEl : String/Object 自动创建 Element ,用来封装当前组件.(一般为div)
contentEl : String 指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容
loader : Ext.ComponentLoader/Object 一个配置对象或者一个 Ext.ComponentLoader 实例加载组件远程内容
配置选项示例
listeners
listeners: {
click: {
element: 'el',
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body',
fn: function(){ console.log('dblclick body'); }
}
}
方法
getId() : String 获得组件的id
getXType() : String 获得组件的xtype
getHeight() : Number 获得组件的当前高度
getWidth() : Number 获得组件的当前宽度
setHeight(Number height) 设置组件的高度
setWidth( Number width ) 设置组件的宽度
getSize() : Object 获取这个组件的底层元素的当前大小. {width:元素宽度, height:元素高度}
setSize(Number width, Number height ) 设置组件的宽度和高度
getPosition([Boolean local]) Number[] 获得组件当前的x,y坐标,返回一个数组,参数为是否返回元素的左侧和顶部位置,而不是x,y坐标
setPosition( Number left, Number top, [Boolean/Object animate] ) 设置组件的 left 和 top 值
disable([Boolean silent]) 禁用组件,参数表示是否解除触发disable事件
enable([Boolean silent]) 启用组件,参数表示是否解除触发enable事件
setDisabled(Boolean disabled) 启用或禁用组件
setVisible(Boolean visible) 显示或隐藏组件
destory() 销毁组件
show( [String/Ext.Element animateTarget], [Function callback], [Object scope] ) 显示组件
showAt( Number x, Number y, [Boolean/Object animate] ) 显示组件在特定XY位置
nextSibling([String selector]) : Ext.Component 返回此组件的下一个同级组件.参数为过滤器
previousSibling( [String selector] ) : Ext.Component 返回此组件的前一个同级组件.参数为过滤器
up( [String selector] ) : Ext.container.Container 查找匹配简单选择器的祖先容器.
isDisabled() : Boolean 当前组件是否被禁用
isHidden() : Boolean 当前组件是否被隐藏
isVisible([Boolean deep]) : Boolean 如果当前组件可见, 返回true.参数为查询所有父元素的可见状态
hasCls(String className) : Boolean 检查该元素的 DOM 节点上的指定 CSS 类是否存在
isXType(String xtype, [Boolean shallow]) : Boolean 检验此组件是否是指定的xtype或其子类,shallow为true表示组件是否就是指定xtype
focus([Boolean selectText], [Boolean/Number delay]) 获得焦点
selectText 是否选择此组件中的文本
delay 延迟焦点的毫秒数
removeListener( String eventName, Function fn, Object scope )
移除事件的处理函数
addListener( String/Object eventName, [Function fn], [Object scope], [Object options] )
向组件添加一个事件处理函数
事件
blur( Ext.Component this, Ext.EventObject The, Object eOpts )
组件失去焦点时触发.
focus( Ext.Component this, Ext.EventObject The, Object eOpts )
组件获取焦点时触发
容器(Ext.container.Container)
任何可能包含其它Ext.Component组件的基类
最常用的的容器类有Ext.panel.Panel,Ext.window.Window和 Ext.tab.Panel。
配置选项
defaultType : String 当通过简写创建子元素时,子元素的默认xtype
defaults : Object/Function 设置所有子元素的默认设置
items : Object/Object[] 子组件或集合 将会自动添加到容器中去
layout : String/Object 配置子组件的布局
属性
items : Ext.util.AbstractMixedCollection
子组件的所有集合.
方法
add( Ext.Component[]/Ext.Component... ) : Ext.Component[]/Ext.Component
Adds 向当前容器中添加 Component(s)
insert( Number index, Ext.Component comp ) : Ext.Component
添加容器到指定的位置
remove( Ext.Component/String comp, [Boolean autoDestroy] ) : Ext.Component
从父容器移除子组件
removeAll( [Boolean autoDestroy] ) : Ext.Component[]
从父容器中移除所有子组件
update( String/Object htmlOrData, [Boolean loadScripts], [Function callback] )
刷新组件的内部区域
findParentByType( String/Ext.Class xtype ) : Ext.container.Container
通过xtype或类 查找第一个符合条件的父组件
child( [String selector] )
获取符合匹配选项的第一层子组件
query( [String selector] ) : Ext.Component[]
用匹配选项检索容器的结构树,参数:符合Ext.ComponentQuery的匹配选项选择器 如果没有指定,所有的子项全部检索
queryBy( Function fn, [Object scope] ) : Ext.Component[]
检索符合传递的函数条件的子组件
queryById( String id ) : Ext.Component
在任何层级上查找符合条件的id或者是itemId的组件
getComponent( String/Number comp )
查找子组件,参数为组件的 itemId 或 id 或 索引
布局
配置选项
layout : String/Object 配置子组件的布局
用法:
layout: 'vbox'
或
layout: {
type: 'vbox',
align: 'left'
}
布局类型(详情参见Ext.layout.container下的类)
Auto
按顺序将子组件渲染到在容器中,不考虑子组件的大小和定位
card
层叠放置,每次铺满父容器显示一个,可通过自定义按钮切换到下一个(类似于选项卡,无切换按钮)
fit
一般只添加一个子元素时使用,铺满整个父元素
hbox
将所有子组件在容器中水平排列,在子元素中使用flex属性控制比例
相关属性
align : String 控制子组件在容器中的对齐方式
top : 各子组件在容器顶部水平对齐(默认值).
middle : 各子组件在容器中间水平对齐.
stretch : 各子组件的高度拉伸至与容器的高度相等.
stretchmax : 各子组件的高度拉伸至与最高的子组件的高度相等.
子元素属性
flex : Number 每个含有flex属性的子项将会被根据当前子项的flex值与所有其他含flex值子项的值的和 的相对比例进行伸缩
vbox
将所有子组件在容器中垂直排列,在子元素中使用flex属性控制比例
相关属性
align : String 控制子组件在容器中的对齐方式
left : 各子组件在容器左边垂直对齐(默认值).
center : 各子组件在容器中间垂直对齐.
stretch : 各子组件的宽度拉伸至与容器的宽度相等.
stretchmax : 各子组件的宽度拉伸至与最宽的子组件的宽度相等.
子元素属性
flex : Number 每个含有flex属性的子项将会被根据当前子项的flex值与所有其他含flex值子项的值的和 的相对比例进行伸缩
column
列布局,把组件水平排列,可有多行,通过在子元素中指定使用columnWidth或width 来指定子元素所占的列宽度
子元素属性
width 绝对长度,单位像素
columnWidth 剩余长度的百分比,小数,总和不为1也可以,表示多行
不同子元素可以混合使用不同的配置选项
border
区域布局,他将页面分隔为west,east,south,north,center这五个部分。
我们需要在其items中指定使用region参数为其子元素指定具体位置,支持多重嵌套面板, 自动在各区域之间产生分隔栏
子元素属性
region : String 位置:取值"north","south", "west","east", "center" (北,南,西,东,中)
split : Boolean 是否允许拖动边界调整大小
accordion
手风琴效果,将多个Panel以一种可以展开/收缩的样式排列
相关属性
activeOnTop : Boolean 是否将当前展开面板移动到菜单顶部
hideCollapseTool : Boolean 是否隐藏 展开/隐藏工具按钮,如果为true,titleCollapse将被自动设为'true'
titleCollapse : Boolean 是否允许通过点击标题栏的任意位置来展开/收缩子项,如果为false,hideCollapseTool将被自动设为'false'
animate : Boolean 面板进行展开/收缩时,是否使用动画效果
fill : Boolean 是否调整 展开的子项高度填充容器高度
multi : Boolean 是否允许同时显示多个子面板
reserveScrollbar : Boolean 此值为true时, 无论垂直滚动条是否需要出现, 都会在页面为垂直滚动条预留出空间
align : String 控制子组件在容器中的对齐方式
left : 默认值 各子组件在容器左边垂直对齐.
center : 各子组件在容器中间垂直对齐.
stretch : 各子组件的宽度拉伸至与容器的宽度相等.
stretchmax : 各子组件的宽度拉伸至与最宽的子组件的宽度相等.
anchor
将子元素的位置与父容器大小进行关联固定. 如果容器大小改变, 子项将被重新渲染固定.
子元素属性
anchor 告知布局子项应该如何放置,值为由两个 数值组成的字符串: 水平相对值和垂直相对值
百分比 anchor: '100% 50%' // 子组件的宽度为即等于容器的宽度, 高度为容器的1/2
偏移量 anchor: '-50 -100' // 子组件的宽度为容器的宽度减50px, 高度为容器的高度减100px.
混合使用 anchor: '100% -100'
table
将内容渲染到一个HTML的table中. 可以指定列数, 也能够使用rowspan和colspan参数来创建复杂的布局
相关属性
columns : Number 此列表布局中列的总数.
子元素属性
rowspan : Number
colspan : Number
Form
是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用
这个布局会将表单中所有的输入框纵向的依次的排列, 且宽度与容器宽度相等
注意
相关属性配置到layout对象中,和type属性并列
子元素属性配置到子元素中
面板(Ext.panel.Panel,xtype:panel)
概述
继承于 容器(Ext.container.Container)
Panel是一个容器,具有特定的功能和结构组件,使它使能够完美地为面向应用的用户界面创建部件。
面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。
示例
Ext.onReady(function(){
new Ext.panel.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'面板主区域 ',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
配置选项
title : String 此标题头内容被用于在panel 标题头展现
titleAlign : String 标题的位置,可以设置为"left"(左), "right"(右) 或者 "center"(居中)
header : Boolean/Object 通过设置false来阻止Panel的标题头被创建与渲染,默认为undefined。通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头。
collapsible : Boolean 是否具有可折叠功能
closable : Boolean 是否为这个窗体添加'close'工具按钮允许用户通过点击这个按钮来关闭这个窗体
closeAction : String 当标题头的关闭按钮被单击将'destroy'销毁,'hide'隐藏
tools : Object[]/Ext.panel.Tool[] 添加小图标到Panel头工具区域
dockedItems : Object/Object[] 添加组件到Panel中做为停靠项,可以被安置在Panel的上方,右方,左方或者下方
示例
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Docked to the top'
}]
}]
bbar : Object/Object[] 便利的配置。'Bottom Bar'的简写
等价于
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
lbar : Object/Object[] 便利的配置。作为'Left Bar'的简写
rbar : Object/Object[] 便利的配置。作为'Right Bar'的简写
tbar : Object/Object[] 便利的配置。作为'Top Bar'的简写
fbar : Object/Object[] 便利的配置用于为Panel底部添加子组件。作为Footer Bar的简写。
等价于
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
buttons : Object/Object[] 便利的配置用于为 Panel 底部添加按钮组。这和fbar的配置意义一致
方法
close( )
关闭Panel。默认情况下这个方法会将其自身的DOM对象在浏览器中移除,destroys 销毁Panel对象并且销毁该Panel中的子组件。在关闭Panel动作发生之前beforeclose事件被触发,如果 要取消关闭动作则在其事件的...
collapse( String direction, [Boolean animate] ) : Ext.panel.Panel
折叠 Panel 体以便将其隐藏。挂靠组与边界平行折叠之后保持其依然可见。触发beforecollapse事件,如果取消 折叠动作在该事件的处理函数中返回false。
direction : String 折叠的方向,必须从下面当中选一个
Ext.Component.DIRECTION_TOP
Ext.Component.DIRECTION_RIGHT
Ext.Component.DIRECTION_BOTTOM
Ext.Component.DIRECTION_LEFT
animate : Boolean (optional)
True 折叠的时候动态的过度,否则没有动态效果 (默认参照Panel的animCollapse属性配置)
expand( Boolean animate ) : Ext.panel.Panel
展开 Panel 使之状态变为可见.触发beforeexpand事件,当处理函数中返回false则展开操作被取消. ...
toggleCollapse( ) : Ext.panel.Panel
根据panel的当前状态,执行expand或者collapse操作的快捷方式
相关对象
Ext.panel.Tool
继承于 Ext.Component
这个类用于在Panel的头部显示可视化的小图标。
有25个可设置的图标依照配置type使用。 属性handler配置提供一个方法来响应单击事件。
示例
tools: [{
type: 'help',
handler: function(){
// 此处显示帮助的逻辑
}
}
配置选项
type : String
工具类型的渲染(小图标),可选值参见文档
handler : Function
当点击工具按钮时被调用的方法
参数
event : Ext.EventObject - 单击事件.
toolEl : Ext.Element - 工具元素.
owner : Ext.panel.Header - panel的头元素.
tool : Ext.panel.Tool - 工具对象
scope : Object
handler方法的作用域
tooltip : String/Object
tooltip作为工具按钮的提示
tooltipType : String
tooltip使用的类型,可使用'title',默认'qtip'
事件
click( Ext.panel.Tool this, Ext.EventObject e, Object eOpts )
当工具按钮被点击是触发
工具栏(Ext.Toolbar,xtype: toolbar)
继承于 Ext.container.Container
工具栏上可以存放按钮、文本、分隔符等内容。
通过面板的tools 配置选项往面板头部加入预定义的工具栏选项
示例
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
{
text: '按钮' // 默认的工具栏类型 xtype: 'button'
},
{
xtype: 'splitbutton',
text : '分割按钮'
},
'->', // 等同 { xtype: 'tbfill' },使用右对齐容器
{
xtype : 'textfield',
name : 'field1',
emptyText: '输入搜索词'
},
'-', // 等同 {xtype: 'tbseparator'} 添加垂直分隔条
'text 1', // 等同 {xtype: 'tbtext', text: 'text1'}
{ xtype: 'tbspacer' }, // 等同 ' ' 创建空格
'text 2',
{ xtype: 'tbspacer', width: 50 }, // 添加一个50像素的空格
'text 3'
]
});
某些项可以通过快捷字符串创建:
捷径 xtype Class 描述
-> tbfill Ext.toolbar.Fill 使用右对齐容器
- tbseparator Ext.toolbar.Separator 添加垂直分隔条在工具栏之间
tbspacer Ext.toolbar.Spacer 添加横空格在元素之间
ViewPort(Ext.container.Viewport,xtype:viewport)
概述
继承于Ext.container.Container
VeiwPort 代表整个浏览器显示区域,该对象自动渲染到页面的body 区域,一个页面中只能有一个ViewPort 实例
如果内部的子面板要实现滚动条, 需要在子元素中配置autoScroll属性
默认布局为border
示例
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[
{
title:"面板",
region:"north",
height:100,
html:"网站后台管理系统! "
},
{
title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",
items:[
{title:"面板1",html:'111'},
{title:"面板2",html:'222'}
]
}
]
});
});
窗口(Ext.window.Window,xtype:window)
继承于Ext.panel.Panel
窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性
示例
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
expandOnShow : true,
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {}) // 一个假的空的数据存储
}
}).show();
配置选项
maximizable : Boolean 是否显示最大化按钮
minimizable : Boolean 是否显示最小化按钮
maximized : Boolean 初始状态是否为最大化
modal : Boolean 是否为有模式的窗口,即阻止用户对背后窗口的操作
resizable : Boolean/Object 是否允许调整窗口大小
draggable : Boolean 是否允许拖动窗口位置,通常需要设置窗口位置
x : Number 窗口初始状态左上角的横坐标
y : Number 窗口初始状态左上角的纵坐标
事件
maximize( Ext.window.Window this, Object eOpts )
在窗口最大化后触发。
minimize( Ext.window.Window this, Object eOpts )
在窗口最小化后触发
resize( Ext.window.Window this, Number width, Number height, Object eOpts )
在窗口被调整之后触发
restore( Ext.window.Window this, Object eOpts )
当窗体在最大化之后被恢复到他以前的大小和位置是触发
对话框(Ext.MessageBox)
此类是Ext.window.MessageBox类的单例,Ext.window.MessageBox类继承于Ext.window.Window
Ext.MessageBox可简写为Ext.Msg
提示框
alert( String title, String msg, [Function fn], [Object scope] )
fn 回调函数
scope 回调函数被执行的范围
示例
Ext.MessageBox.alert("请注意","用户名不能为空");
确认框
confirm( String title, String msg, [Function fn], [Object scope] )
fn 回调函数
scope 回调函数被执行的范围
示例
Ext.MessageBox.confirm("请注意","确定要删除这条记录吗",function(button){
if(button=='yes'){
Ext.MessageBox.alert("结果","你点了'yes'");
}else if(button=='no'){
Ext.MessageBox.alert("结果","你点了'no'");
}
});
输入框
prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
fn 回调函数
scope 回调函数被执行的范围
multiline 是否为多行文本,为数字时表示高度的像素
value 默认文本
示例
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}else if(button=="cancel"){
alert("你放弃了录入!");
}
});
等待对话框
wait( String msg, [String title], [Object config] )
示例
var win = Ext.MessageBox.wait("操作正在进行...","请稍后");
setTimeout(function(){win.close();},3000);
带进度条的提示框
progress( String title, String msg, [String progressText] )
progressText 显示在进度条内的文本
需要使用Ext.MessageBox.updateProgress方法更新进度
updateProgress( [Number value], [String progressText], [String msg] ) : Ext.window.MessageBox
更新一个进度样式消息盒子的文本和进度条
示例
var win = Ext.MessageBox.progress("请稍后","正在下载第一个","0%");
setTimeout(function(){Ext.MessageBox.updateProgress(0.2,"20%","正在下载第二个");},1000);
setTimeout(function(){Ext.MessageBox.updateProgress(0.4,"40%","正在下载第三个");},2500);
setTimeout(function(){Ext.MessageBox.updateProgress(0.7,"70%","正在下载第四个");},3000);
setTimeout(function(){win.close();},4000);
自定义对话框
show( Object config )
参数的可选配置选项
buttons : Number (optional)
按位键符包括以下任意常数的总和(false表示没有按钮):
Ext.window.MessageBox.OK
Ext.window.MessageBox.YES
Ext.window.MessageBox.NO
Ext.window.MessageBox.CANCEL
buttonText : Object
可覆盖对应按钮的文本,对象的选项有 ok,yes,no和cancel
fn : Function
回调函数,参数 按钮文本,输入框输入的值
icon : String
图标
modal : Boolean
为假,当消息框被显示时,允许用户与页面的交互
msg : String
提示消息,是html,可使用标签
title : String
标题文本
width : Number
对话框的宽度
更多选项参见文档
示例
Ext.Msg.show({
title: '我是一个快乐的对话框',
msg: '我叫你一声你敢答应吗?',
width: 300,
buttons: Ext.Msg.YESNOCANCEL,
buttonText: {
yes: '敢',
no: '不敢',
cancel: '看情况'
},
fn: function(btn){
alert(btn);
}
});
基本表格(Ext.grid.Panel,xtype:gridpanel,grid)
继承于 Ext.grid.Panel
Grid是在客户端上显示大量的表格数据的极佳方式,更容易地进行获取、排序和筛选大量的数据。
Grid是由两个主要部分组成的 - 一个含有全部数据的Store和一个要进行渲染列的集合。
示例
var store = 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': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
store是表格的数据源,相当于一张表
columns的header为列名,dataIndex为要显示的表的列
这样可以将store的数据全部显示到表格中
配置选项
store : Ext.data.Store
表格所使用到的Store,该Store将作为其数据源
columns : Ext.grid.column.Column[]/Object
一个column列定义对象数组,它定义了在表格中出现的所有列。 每个列定义提供了关于列的标题文本, 以及关于列的数据来源的定义
selType : String
所使用到的选择模型的xtype
rowmodel 一次选择一行(默认)
cellmodel 一次选择一列
checkboxmodel 复选框样式,可选中和取消
如果存在具体配置,要使用selModel
selModel : Ext.selection.Model/Object
一个selection model实例或配置对象
header : Boolean/Object
通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头,字符串被当做列名
emptyText : String
当Store为空时,使用默认文本(接受html标签)来显示在Panel的body区域
enableColumnMove : Boolean
设置为false来禁用拖动表格中的列
enableColumnResize : Boolean
设置为false来禁用表格中列的大小调节功能。
forceFit : Boolean
设置为true,则强制列自适应成可用宽度。它们的宽度成比例地改变,以便采用内容的整个宽度。
multiSelect : Boolean
设置为true则启用'MULTI'多行选择模式。
rowLines : Boolean
设置为false则取消行的框线样式
columnLines : Boolean
添加列的框线样式
sortableColumns : Boolean
设置为false则禁用通过单击标题和排序菜单项来进行列排序
事件
事件很多,参见文档
相关类
列(Ext.grid.column.Column,xtype: gridcolumn)
继承于 Ext.container.Container
此类用于对Ext.grid.Panel某列的定义,它包含了表头的配置和单元格的配置
配置选项
text : String 表头该列的显示名称
align : String 设置列头及单元格的对齐方向。 可取值: 'left', 'center', and 'right'。
sortable : Boolean 控制列头是否可以排序
hideable : Boolean 控制该列是否可以通过列菜单隐藏。
menuDisabled : Boolean 控制是否禁用列菜单。
draggable : Boolean 控制是否可以拖拽改变各列的顺序。
groupable : Boolean 控制是否可以按该列分组,参见Ext.grid.feature.Grouping
dataIndex : String 指定Ext.data.Store的某个field来作为该列的value值。
renderer : Function 指定函数,把value值转换为可显示的内容。
emptyCellText : String 空单元格(取值为undeifned,null或空字符串)的显示内容。
方法
getColumnCount( )
返回HeaderContainer中grid columns子项的个数
事件
参见文档
数据存储器
比较重要,专门负责和服务器交互,单独拿出来,参见后面
其它功能
编辑
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name', field: 'textfield' },
{ header: 'Email', dataIndex: 'email', flex: 1,
field: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: 'Phone', dataIndex: 'phone' }
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
我们指定了一个field属性。对于Name列, 变为一个文本框编辑值。对于Email列,传递进去了allowBlank: false,将提供非空验证。Phone列不可被编辑.field的值为表单组件的xtype
列编辑: 单元格内编辑,在grid中指定selType配置项使用'cellmodel', 并且也要创建Ext.grid.plugin.CellEditing插件实例, 在这里配置了鼠标单击后激活单元格的编辑器。
行编辑: 基于行的编辑,在grid中指定selType配置项使用'rowmodel', 并且也要创建Ext.grid.plugin.RowEditing插件实例, 在这里配置了鼠标单击后激活单元格的编辑器。
分组
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'seniority', 'department'],
groupField: 'department',
data: {'employees':[
{ "name": "Michael Scott", "seniority": 7, "department": "Management" },
{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
{ "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
{ "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
{ "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Seniority', dataIndex: 'seniority' }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody()
});
滚动加载数据
分页
数据存储器(Ext.data.Store, xtype: store)
Store 大意是: 仓库、存储的意思.
Store类可以理解为一个客户端缓存的表,用于存储 Model 对象.
Stores 通过一个代理 Proxy 来加载数据, 并提供函数来 排序, 过滤 以及查询 内部所包含的 model 实例.
创建Store非常简单 - 我们只需要传入 Model 以及用来加载/保存 数据的Proxy作为配置项即可
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
一般可以简写为
var myStore = Ext.create('Ext.data.Store', {
fields: ['firstName','lastName','age','eyeColor'],
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
配置选项
storeId : String
当前store对象的唯一标识ID,可使用Ext.data.StoreManager.lookup(storeId)创建store对象
model : String
当前store对象的Model数据模型的名称
fields : Object[]
此参数可以用来代替model参数. fields值应该是一个Ext.data.Field属性对象的集合.
对于稍复杂的情况,应使用model参数
示例 fields : ['name','age']
proxy : String/Ext.data.proxy.Proxy/Object
此Store使用的Proxy
data : Object[]/Ext.data.Model[]
本地加载的数组,或者Model 实例数组,或者数据对象数组
autoLoad : Boolean/Object
如果data属性未定义, 并且autoLoad值为'true'或对象, 则此store的load方法将在创建后自动执行.
如果autoLoad值是一个对象, 这个对象将 作为参数传递给load方法
pageSize : Number
组成一页'page'的记录数量.
groupField : String
需要分组的字段
属性
currentPage : Number
Store 最后一次load的页
data : Ext.util.MixedCollection
持有 store 的本地缓存记录的 对象集合
方法
count( [Boolean grouped] ) : Number
获取 store 中Model的数量,只有过滤后通过的元素会被计算进来,参数跟分组相关
each( Function fn, [Object scope] )
为 Store中的每条记录 record 调用指定的函数
getCount() : Number
获取store中记录的数量(当前页)
getTotalCount() : Number
获取store中记录的数量(所有页)
getSelectionModel() : Ext.selection.Model
返回正在使用的选择模型,如果它没有创建,则通过配置创建它。
load( [Object/Function options] )
通过配置的 proxy 加载数据到Store 中,参数为回调函数
回调函数的参数
records : Ext.data.Model[] 记录数据。
operation : Ext.data.Operation 操作本身
success : Boolean 操作成功完成时为true
loadPage( Number page, Object options )
加载给定 'page' 的数据
loadData( Ext.data.Model[]/Object[] data, [Boolean append] )
直接加载一个数组的数据到 Store 中.
相关对象
字段(Ext.data.Field)
配置选项
name : String
Model中字段的映射名称.
如果除了'name'以外没有其他属性需要定义, 那么可以只用一个'name'值的字符串来定义这个字段
convert : Function
一个函数, 用来将Reader读取的值转换成存储到Model中的对象
type : String/Object
字段的数据类型, 用于在没有定义convert时, 把接收数据转换为存储值进行自动类型转换. 用一个字符串来定义.
auto(默认值, 意味着无convert方法),string,int,float,boolean,date
mapping : String/Number
从原始数据 对象中 获取用于填充此字段的 对应字段名称
defaultValue : Object
不能从数据中读取的字段的默认值
dateFormat : String
用于当type为"date"时将获取的数据转换为Date对象
persist : Boolean
设为'false'时, 将此字段从模型的Ext.data.Model.modified字段中排除出去,只用于显示,不用于提交
创建示例
'age'
{name:'age',type:'int'}
选择模型(Ext.selection.Model)
记录在一个数据绑定组件内部被选择的记录
方法
getCount() : Number
返回被选择记录的条数
getLastSelected()
返回最后被选择的记录。
getSelection() : Ext.data.Model[]
返回一个当前被选择的记录的数组
getSelectionMode() : String
返回当前选择模式(selectionMode)
getStore() : Ext.data.AbstractStore
获得当前实例的store。
hasSelection() : Boolean
如果有任何一个被选择的记录返回真
select( Ext.data.Model[]/Number records, [Boolean keepExisting], [Boolean suppressEvent] )
选择一个记录实例通过记录实例或者索引
数据模型(Ext.data.Model)
Model代表应用程序管理的一些对象,被Store使用
Model定义为字段、任意方法和与模型相关的属性的集合
配置选项
fields : Object[]/String[]
本模型的字段
idProperty : String
作为本模型唯一的id的字段的名字
proxy : String/Object/Ext.data.proxy.Proxy
本模型使用的代理
validations : Object[]
本模型的验证器的数组。
方法
get( String fieldName ) : Object
返回给定字段的值
getData( Boolean includeAssociated ) : Object
获取每个字段的所有值,并将它们作为 一个对象返回。参数为是否包含关联对象
getFields() : Ext.data.Field[]
返回一个定义本模型结构的Field数组定义 字段根据Model类定义排序
getId() : Number/String
返回idProperty定义的分配给本模型实例的唯一的ID。
getProxy() : Ext.data.proxy.Proxy
返回本模型的代理
set( String/Object fieldName, Object newValue ) : String[]
设置给定字段的值
setId( Number/String id )
设置本模型实例的id
validate() : Ext.data.Errors
使用所有的validations验证当前的数据。
代理类(Ext.data.proxy.Proxy, proxy: proxy)
概述
Store通过Proxy加载和保存Model数据
在此Proxy的主要类型有2种 - Client 和 Server.
所有的子类都在Ext.data.proxy命名空间下
最常用子类是Server类型中的Ext.data.proxy.Ajax,将请求通过ajax发送到同一个域上服务器
配置选项
model : String/Ext.data.Model
要绑定到该Proxy上的Model模型。必选,可从父组件继承
reader : Object/String/Ext.data.reader.Reader
读取器,用来对服务器端响应数据进行解码,或从客户端读取数据
Proxy的默认Reader为JsonReader.
在简写创建时需要指定type属性
proxy: {
type: 'ajax',
url : '/user'
}
type属性用来确定实例化的类,如ajax表示Ext.data.proxy.Ajax类
Ajax数据代理类(Ext.data.proxy.Ajax, proxy:ajax)
使用AJAX请求来从服务器获取数据,然后通常将它们放入 Store中.
继承于Ext.data.proxy.Server,父类Ext.data.proxy.Server继承于Ext.data.proxy.Proxy
配置选项
url : String
请求数据对象的URL
默认所有读数据请求的方式为GET, 而所有写请求的方式为POST
extraParams : Object
将在每次请求中包含的额外参数
headers : Object
添加到Ajax请求的头信息. 默认为undefined
timeout : Number
等待响应的毫秒数。默认为30000毫秒(30秒)
属性
actionMethods : Object
action名称到HTTP请求方式的映射
方法
getMethod( Ext.data.Request request ) : String
返回request对象对应的HTTP请求方式
事件
exception( Ext.data.proxy.Proxy this, Object response, Ext.data.Operation operation, Object eOpts )
当服务器端server返回一个异常时触发
读取器(Ext.data.reader.Reader)
概述
Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据
一般情况下不需要直接创建一个Reader实例, 因为Reader总是和Proxy一起使用, 且其将使用Proxy的reader 配置属性配置
子类有Json,Xml,Array,自动解析不同格式的数据并填充到store中,所有的子类都在Ext.data.reader命名空间下
配置选项
root : String
要解析的数据 所在的集合的名称
implicitIncludes : Boolean
设为true,则自动解析响应对象中嵌套在其他models的models
idProperty : String
主键对应的属性的名称
successProperty : String
检索'success'标识的属性名称,该标识属性的值标示指定请求是否成功
totalProperty : String
检索数据集中记录总数的属性名称. 只有在所有的数据集没有一次得到,而是由服务端分页得到时,该属性才需要用。
messageProperty : String
包含响应信息的属性名称.该属性为可选的.
在简写创建时需要指定type属性
reader: {
type: 'json',
root: 'users'
}
type属性用来确定实例化的类,如json表示Ext.data.reader.Json类
事件
exception( Ext.data.reader.Reader reader, XMLHttpRequest response, Ext.data.ResultSet error, Object eOpts )
当reader从服务端接收到不正确的编码数据时触发
JSON读取器(Ext.data.reader.Json, reader: json)
继承于 Ext.data.reader.Reader
读取服务端响应的JSON格式的数据,自动解析并填充到store中
配置选项
record : String
JSON响应中的数据的位置,用于记录数据发现其本身位置.
在返回数据中包含元数据时,例
"users": [{
"id": "ed-spencer-1",
"value": 1,
"user": {"id": 1,"name": "Ed Spencer"}
}]
其中的每个“user”项目中都包含有额外元数据(例如本例中的’id‘和‘value’)
则要添加配置选项 root:"users", record:"user"
菜单(Ext.menu.Menu,xtype: menu)
继承于Ext.panel.Panel
默认的,菜单是绝对的定位,浮动组件.子元素默认为菜单项
示例
Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // 通常你想设置这个为真 (默认的)
renderTo: Ext.getBody(), // 通常由它的包含容器呈现
items: [{
text: '菜单1'
},{
text: '菜单2',
menu: {
items:[{
text: '菜单1'
},{
text: '菜单2'
}]
}
},{
text: '菜单3'
}]
});
配置选项
allowOtherMenus : Boolean
为真时,在同一时间,允许多个菜单被显示
defaultAlign : String
为此相对于元素的起源的菜单的默认的Ext.Element#getAlignToXY锚位置值
floating : Boolean
是否为绝对定位
ignoreParentClicks : Boolean
为真时,忽略在这个作为一个项目的菜单中点击任何项目 (显示一个子菜单),当点击父项目时, 使子菜单没有被驳回。
plain : Boolean
为真时,删除菜单左侧阴刻线向下并且不缩进组件项目
showSeparator : Boolean
为真显示图片分离器
属性
parentMenu : Ext.menu.Menu
这个菜单的父菜单。
事件
click( Ext.menu.Menu menu, Ext.Component item, Ext.EventObject e, Object eOpts )
当这个菜单被点击时触发
mouseenter( Ext.menu.Menu menu, Ext.EventObject e, Object eOpts )
当鼠标进入这个菜单时触发
mouseleave( Ext.menu.Menu menu, Ext.EventObject e, Object eOpts )
当鼠标存留在这个菜单时触发
mouseover( Ext.menu.Menu menu, Ext.Component item, Ext.EventObject e, Object eOpts )
当鼠标悬停在该菜单时触发
相关对象
菜单项(Ext.menu.Item)
继承于Ext.Component
配置属性
handler : Function
当一个菜单项目被点击时触发的函数
hideOnClick : Boolean
当这个项目被点击时,是否不隐藏其所在的菜单。默认为‘true’
menuExpandDelay : Number
在鼠标在这个项目之上之后,这个项目的子项目扩展之前延迟的毫秒数。默认为200。 ...
menuHideDelay : Number
在鼠标从这个项目上离开之后,这个项目的子菜单隐藏之前延迟的毫秒数。默认为200
text : String
在这个项目中显示的 text/html
属性
menu : Ext.menu.Menu
此菜单项的子菜单
parentMenu : Ext.menu.Menu
菜单项所在的父菜单。
分割线(Ext.menu.Separator)
可用"-"快捷表示
示例
右键菜单:添加contextmenu事件,将菜单showAt(e.getXY())
树(Ext.tree.Panel, xtype: treepanel)
继承于 Ext.panel.Panel
TreePanel提供树形结构的UI表示的树状结构数据,一个TreePanel必须绑定一个Ext.data.TreeStore或提供root选项
示例
var store = Ext.create('Ext.data.TreeStore', {
root: {
children: [
{ text: "detention", leaf: true },
{ text: "homework", children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
配置选项
store : Ext.data.Store
树所使用到的Store,该Store将作为其数据源
columns : Ext.grid.column.Column[]/Object
一个column列定义对象数组,它定义了在表格中出现的所有列。 每个列定义提供了关于列的标题文本, 以及关于列的数据来源的定义
selType : String
所使用到的选择模型的xtype
rowmodel 一次选择一行(默认)
cellmodel 一次选择一列
checkboxmodel 复选框样式,可选中和取消
如果存在具体配置,要使用selModel
selModel : Ext.selection.Model/Object
一个selection model实例或配置对象
header : Boolean/Object
通过配置一个对象 (通过 xtype 来创建) 从而达到用户自定义 Panel 的标题头,字符串被当做列名
emptyText : String
当Store为空时,使用默认文本(接受html标签)来显示在Panel的body区域
enableColumnMove : Boolean
设置为false来禁用拖动表格中的列
enableColumnResize : Boolean
设置为false来禁用表格中列的大小调节功能。
forceFit : Boolean
设置为true,则强制列自适应成可用宽度。它们的宽度成比例地改变,以便采用内容的整个宽度。
multiSelect : Boolean
设置为true则启用'MULTI'多行选择模式。
rowLines : Boolean
设置为false则取消行的框线样式
sortableColumns : Boolean
设置为false则禁用通过单击标题和排序菜单项来进行列排序
animate : Boolean
true,启用expand/collapse动画
displayField : String
在模型的字段,将用作节点的文本
lines : Boolean
false,树用的线置为disable
root : Ext.data.Model/Ext.data.NodeInterface/Object
在这个TreePanel上,允许你不指定一个store。这有助于创建一个简单的树,预加载的数据而无需指定一个TreeStore和Model
rootVisible : Boolean
是否显示根节点root
useArrows : Boolean
true,在tree中使用三角样式的箭头,而不是加减号
方法
collapseAll( [Function callback], [Object scope] )
折叠所有的节点
expandAll( [Function callback], [Object scope] )
展开所有节点
getChecked( ) : Ext.data.NodeInterface[]
取得选中记录的数组。 ...
getRootNode( ) : Ext.data.NodeInterface
返回树的根节点。
expandPath( String path, [String field], [String separator], [Function callback], [Object scope] )
展开一个特殊节点路径的树。
selectPath( String path, [String field], [String separator], [Function callback], [Object scope] )
展开一个特殊节点路径的树,然后选中。
setRootNode( Ext.data.Model//Object root ) :
设置树的根节点。
事件
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts )
选项的单击事件 单击选项时触发
相关对象
Ext.data.TreeStore
继承于 Ext.data.Store
TreeStore是一个允许内嵌数据的存储区实现,它为加载节点提供了一些方便的方法, 并能够使用分层树状结构来结合一个store
配置选项
rootVisible : Boolean
设置为false,在本store的数据集合中不包含根节点
clearOnLoad : Boolean
在加载之前删除先前已经存在的子节点。默认为true
root : Ext.data.Model/Ext.data.NodeInterface/Object
当前store的根节点。
方法
getNodeById( Object id ) : Ext.data.NodeInterface
通过id获取记录的节点
Ext.data.NodeInterface
本类是一个应用到Model的原型上的方法集合,使其具有Node API。这意味着树状模型 具有所有与树相关的方法
配置选项
allowDrag : Boolean
设置为false禁止拖动本节点
allowDrop : Boolean
设置为false禁止(将其它节点)拖到本节点。 ...
checked : Boolean
设置为true或者false,在节点旁显示一个复选框。
children : []
子节点数组
expandable : Boolean
设置为true允许展开和折叠当前节点。 ...
expanded : Boolean
是否初始为展开状态。
href : String
链接URL
icon : String
本节点的图标的URL
index : Number
节点在父节点下的位置
isFirst : Boolean
True如果本节点是第一个节点。
isLast : Boolean
True如果本节点是最后的节点。
leaf : Boolean
设置为true表明本节点没有子节点。不会为本节点渲染展开图标或箭头,默认false
parentId : String
父节点ID
qtip : String
本节点上显示的Tooltip文本。
qtitle : String
Tooltip标题。
root : Boolean
True如果本节点是根节点。
text : String
本节点标签上的文本。
属性
childNodes : Object
本节点的子节点数组。如果本节点没有子节点,数组为空。
firstChild : Object
本节点的第一个子节点的引用。如果本节点没有子节点,返回null。
isNode : Boolean
true在本类和其子类中标记一个对象为一个实例化的Node节点。 ...
lastChild : Object
本节点的最后子节点的引用。如果本节点没有子节点,返回null。
nextSibling : Object
本节点的下一个兄弟节点的引用。如果本节点没有下一个兄弟节点,返回null。
parentNode : Object
本节点的父节点的引用。如果本节点是根节点,返回null。
previousSibling : Object
本节点的上一个兄弟节点的引用。如果本节点没有上一个兄弟节点,返回null。
方法
appendChild( Ext.data.NodeInterface/Ext.data.NodeInterface[] node ) : Ext.data.NodeInterface
插入一个或多个节点作为本节点的最后子节点
collapse( [Boolean recursive], [Function callback], [Object scope] )
折叠本节点。 ...
collapseChildren( [Function recursive], [Function callback], [Object scope] )
折叠本节点的所有子节点。 ...
contains( Ext.data.NodeInterface node ) : Boolean
如果本节点是node节点的祖先节点,返回true
expand( [Boolean recursive], [Function callback], [Object scope] )
展开本节点。 ...
expandChildren( [Boolean recursive], [Function callback], [Object scope] )
展开本节点所有的子节点。 ...
findChild( String attribute, Object value, [Boolean deep] ) : Ext.data.NodeInterface
查找属性名为attribute值为指定的value的第一个子节点。 ...
findChildBy( Function fn, [Object scope], [Boolean deep] ) : Ext.data.NodeInterface
通过自定义函数查找匹配的第一个子节点。 ...
getChildAt( Number index ) : Ext.data.NodeInterface
返回指定位置的子节点。 ...
getPath( [String field], [String separator] ) : String
获取当前节点相对于根节点的层级路径。 ...
hasChildNodes( ) : Boolean
如果节点有子节点返回true,否则返回false
isExpanded( ) : Boolean
如果本节点是展开的,返回true ...
isFirst( ) : Boolean
如果本节点是其父节点的第一个子节点,返回true ...
isLast( ) : Boolean
如果本节点是其父节点的最后子节点,返回true ...
isLeaf( ) : Boolean
如果本节点是叶子节点,返回true
isRoot( ) : Boolean
如果本节点是根节点,返回true
removeChild( Ext.data.NodeInterface node, [Boolean destroy] ) : Ext.data.NodeInterface
从本节点中移除一个子节点
事件
参见文档
选项卡(Ext.tab.Panel, xtype: tabpanel)
继承于 Ext.panel.Panel
默认子元素类型:面板,默认布局:card
示例
new Ext.tab.Panel({
renderTo : "hello",
width : 300,
height : 200,
items : [
{title:'选项卡1',html:'我是面板1'},
{title:'选项卡2',html:'我是面板2'}
]
});
配置属性
activeTab : String/Number/Ext.Component
最初被激活的选项卡
maxTabWidth : Number
一个选项卡的最大宽度。
minTabWidth : Number
一个选项卡的最小宽度
plain : Boolean
true时 不在选项卡栏显示背景
tabPosition : String
选项卡栏的位置。能为'top' 或者 'bottom'
deferredRender : Boolean
是否在打开时再渲染面板内容(默认为true)
动态添加删除选项卡示例
var i = 2;
var panel = new Ext.tab.Panel({
renderTo : "hello",
width : 300,
height : 200,
items : [
{title:'选项卡1',html:'我是面板1'},
{title:'选项卡2',html:'我是面板2'}
],
buttons : [
{
text:'添加选项卡',
handler: function(){
i++;
var subPanel = new Ext.panel.Panel({
title:'选项卡'+i,
html:'我是面板'+i,
closable:true
});
panel.add(subPanel);
subPanel.show();
}
},{
text:'删除当前选项卡',
handler: function(){
//这里为什么是panel.items.items,调试可以看出来,但是api看不出来
Ext.each(panel.items.items,function(item,index){
if(item.isVisible()){
panel.remove(item);
return false;
}
});
}
}
]
});
其它
可拖动的选项卡
选项卡右键菜单
Ext命名空间
Ext 命名空间(全局对象)封装了所有类、单例和 Sencha 库所提供的实用方法
提供许多常用的方法,从其他类作为 Ext 命名空间内的快捷方式。 例如 Ext.getCmp 就是 Ext.ComponentManager.get 的别名。
常用方法
getBody()
将当前document的body对象当作Ext.Element返回。
get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element
通过id查找现有的Element。get是Ext.dom.Element.get的别名。
getCmp( String id ) : Object
通过id查找现有的Component,Ext.ComponentManager.get方法的简写。
getStore( String/Object store ) : Ext.data.Store
Ext.data.StoreManager.lookup方法的快捷方式
getDoc()
将当前的HTML的document对象作为Ext.Element返回
getDom( String/HTMLElement/Ext.Element el )
返回dom对象
getHead()
将当前document的head对象当作Ext.Element返回
onReady( Object fn, Object scope, Object options )
Ext.Loader.onReady的别名
create( [String name], [Object... args] ) : Object
实例化类
name 类名或别名
args 将传给类的构造函数
id( [HTMLElement/Ext.Element el], String prefix ) : String
对页面元素生成唯一id,如果该元素已存在id,则不会再生成
el : HTMLElement/Ext.Element (optional) 将要生成id的元素
prefix : String (可选) id的前缀(默认为 "ext-gen")
返回生成的id
decode( String json, Boolean safe ) : Object
Ext.JSON.decode的简写形式 解码(解析)JSON字符串对象。
json json字符串
safe 解析失败是否抛异常
encode( Object o ) : String
Ext.JSON.encode的简写形式 编码对象、 数组或其他值
log( String/Object message )
记录一条消息。如果存在一个控制台,则它将使用
iterate( Object/Array object, Function fn, [Object scope] )
迭代一个数组或一个对象
defer( Function fn, Number millis, Object scope, Array args, Boolean/Number appendArgs ) : Number
延迟调用函数
fn : Function 要延迟执行的函数。
millis : Number 延迟时间,以毫秒为单位 (如果小于或等于 0 函数则立即执行)
scope : Object (可选) 该函数执行的作用域(this引用)。 如果省略,默认指向window。
args : Array (可选) 覆盖原函数的参数列表 (默认为该函数的参数列表)
appendArgs : Boolean/Number (可选) 如果该参数为true,将参数加载到该函数的后面, 如果该参数为数字类型,则将参数将插入到所指定的位置。
each( Array/NodeList/Object iterable, Function fn, [Object scope], [Boolean reverse] ) : Boolean
迭代一个数组或是可迭代的值,在每个元素上调用给定的回调函数
iterable : Array/NodeList/Object 将要迭代的值。 如果这个参数不可迭代,回调函数将只调用一次。
fn : Function 回调函数. 如果返回false, 迭代将停止, 方法返回当前的索引.
scope : Object (optional) 指定函数执行的(this 引用)作用域
reverse : Boolean (optional) 反转迭代的顺序(从尾到头循环) 默认为false
回调函数参数
item : Object 数组当前的索引中的元素
index : Number 数组当前的索引
allItems : Array 作为方法第一个参数的数组本身
isBoolean( Object value ) : Boolean
如果传递的值是一个布尔值,则返回 true。
isDate( Object object ) : Boolean
如果传递进来的是一个JavaScript的date对象,返回true,否则返回false。
isDefined( Object value ) : Boolean
如果传递的值已定义,则返回 true。
isElement( Object value ) : Boolean
如果传递的值是 HTMLElement,则返回 true
isEmpty( Object value, Boolean allowEmptyString ) : Boolean
如果传递的值为空,则返回 true,否则返回 false。该值被认为是空的如果他或是其一: null undefined a zero-length array a zero-length string (除非 allowEmpt...
isFunction( Object value ) : Boolean
如果传递进来的是一个JavaScript的Function,返回true,否则返回false。
isNumber( Object value ) : Boolean
如果传递的值是一个数字,则返回 true。对于非限定数字返回 false。 ...
isNumeric( Object value ) : Boolean
验证一个值是数值
按钮(Ext.button.Button, xtype: button)
继承于 Ext.Component
可以使用该组件的创建简单的按钮
当点击按钮时执行handler 内部的代码, 或用 listeners(监听)一些事件
配置选项
text : String
按钮里的文字用 innerHTML
textAlign : String
按钮的文本对齐属性(center, left, right)
handler : Function
当点击按钮是触发的函数(可以用于代替click事件).
href : String
当点击按钮时打开的网址,指定这个配置,将使这个按钮添加 一个 元素
enableToggle : Boolean
true时允许被按压(点一次按下,再点一次起来)
icon : String
按钮中图标的所在路径
iconAlign : String
按钮框中图标的位置
'top','right','bottom','left'
iconCls : String
一个用于设置按钮图标的CSS类,
params : Object
当 href被指定后,在网址用需要传输的参数名的对象
scale : String
指定按钮的大小
'small' - 定义按钮的高度为16px.
'medium' - 定义按钮的高度为24px.
'large' - 定义按钮的高度为32px.
scope : Object
定义 handler 和 toggleHandler执行时的域范围 默认指向该按钮
属性
disabled : BooleanREADONLY
当按钮不可用时为 True
hidden : BooleanREADONLY
当按钮隐藏时为True
事件
click( Ext.button.Button this, Event e, Object eOpts )
单击按钮的时候触发的事件,在 handler事件调用前触发
mouseout( Ext.button.Button this, Event e, Object eOpts )
当鼠标离开按钮时触发的事件
mouseover( Ext.button.Button this, Event e, Object eOpts )
当鼠标在按钮上悬浮的时候触发的事件
toggle( Ext.button.Button this, Boolean pressed, Object eOpts )
在“按压”状态进行改变的时候触发的事件(只有在enableToggle = true的情况下有效)
表单组件
表单组件xtype
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
表单元素体系
Ext.Component 组件
Ext.container.Container 容器
Ext.panel.Panel 面板
Ext.form.Panel 表单面板
Ext.form.field.Base 表单元素基类
Ext.form.field.Text 文本框
Ext.form.field.ComboBox 下拉列表
Ext.form.field.TextArea 多行文本框
Ext.form.field.Date 日期控件
Ext.form.field.File 文件上传控件
Ext.form.Checkbox 复选框
Ext.form.field.Radio 单选框
Ext.form.field.Hidden 隐藏域
Ext.form.FieldContainer 文本域容器
Ext.form.CheckboxGroup 复选按钮组
Ext.form.RadioGroup 单选按钮组
Ext.form.field.HtmlEditor html编辑器
表单面板(Ext.form.Panel,xtype: form)
继承于Ext.panel.Panel
默认布局anchor,每行一个元素
FormPanel 类接受 Ext.form.Basic 类支持的所有配置项
方法
getForm( ) : Ext.form.Basic
获取此 Panel 包含的 Form
getValues( [Boolean asString], [Boolean dirtyOnly], [Boolean includeEmptyText] ) : String/Object
获取form中所有表单域当前值得 快捷函数. 和调用 this.getForm().getValues() 返回的结果是一样的
loadRecord( Ext.data.Model record ) : Ext.form.Basic
载入一个 Ext.data.Model 到表单中
submit( Object options )
本方法是底层 BasicForm 的 Ext.form.Basic.submit 方法的一个代理
表单(Ext.form.Basic,无xtype)
继承于Ext.util.Observable,不在组件体系
示例
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
width: 350,
// 将会通过 AJAX 请求提交到此URL
url: 'save-form.php',
// 表单域 Fields 将被竖直排列, 占满整个宽度
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// 重置 和 保存 按钮.
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('保存成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('操作失败', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
配置选项
url : String
如果doAction未被提供时使用的表单操作URL
method : String
如果操作选项未提供时使用的表单操作的请求方法(GET或POST)
baseParams : Object
参数,来传递所有的请求
standardSubmit : Boolean
如果设为true,使用标准HTML表单提交替代XHR(Ajax)式样表单提交
方法
checkValidity( )
检查整个表单的有效性自动上一次检查后是否发生了变化,如果改变了,触发validitychange事件
reset( ) : Ext.form.Basic
重置表单中的全部字段
submit( Object options ) : Ext.form.Basic
dosubmit action的快捷方式。默认使用AJAX提交表单
options
url : String
method : String
params : String/Object 传入参数
headers : Object action设置的请求头
success : Function 成功后将被调用的回调函数
failure : Function 失败后将被调用的回调函数
scope : Object 调用回调函数的作用域
clientValidation : Boolean true在提交前最终调用isValid,确定表单域是否有效
success和failure的参数
form : Ext.form.Basic
action : Ext.form.action.Action
doAction( String/Ext.form.action.Action action, [Object options] ) : Ext.form.Basic
执行欲定义的动作(Ext.form.action.Action的实现)来执行应用特有的处理
findField( String id ) : Ext.form.field.Field
过id或name查找表单内的特定Ext.form.field.Field
getValues( [Boolean asString], [Boolean dirtyOnly], [Boolean includeEmptyText] ) : String/Object
检索表单中字段为一组键值对的,用getSubmitData()方法收集值。 如果相同的name下有多个字段返回多值,将被合并成一个数组
setValues( Object/Object[] values ) : Ext.form.Basic
批量设置表单内的字段值
load( Object options ) : Ext.form.Basic
从服务器加载Ext.data.Model到该表单,参数为action对象.
服务器返回的数据格式
{success:true,data:{name:"张三",password:111}}
loadRecord( Ext.data.Model record ) : Ext.form.Basic
加载Ext.data.Model到该表单
hasUpload( )
如果表单包含文件上传域,返回true。这是用于确定提交表单的方法: 文件上传不能用标准“Ajax”技术执行
isValid( )
如果表单上的客户端验证成功,返回true
markInvalid( Object/Object[]/Ext.data.Errors errors ) : Ext.form.Basic
批量标记表单内无效字段
事件
beforeaction( Ext.form.Basic this, Ext.form.action.Action action, Object eOpts )
任何action被执行前触发。返回false取消action
相关对象
动作(Ext.form.action.Action)
继承于Ext.Base
配置属性
failure : Function
当接收到一个操作失败数据包,或者在Ajax通讯失败时调用的方法
form : Ext.form.Basic
Action调用的BasicForm的实例
headers : Object
附加在AJAX提交和加载请求中的header信息
method : String
HTTP方法用于访问所请求的UR
params : Object/String
传递的额外的参数
scope : Object
调用回调函数的作用域
success : Function
当接收到一个合法的操作成功数据包时调用的方法
url : String
Action调用的URL
waitMsg : String
在执行操作期间,调用Ext.window.MessageBox.wait方法时显示的消息
waitTitle : String
Ext.window.MessageBox.wait在执行操作期间,显示的标题文本
属性
failureType : String
失败的类型被检查为以下几种类型之一: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, 或者 LOAD_FAILURE
response : Object
被用来执行action操作的XMLHttpRequest的原始对象
result : Object
解码好的响应对象,包含一个布尔型的success 参数和其他详细的操作说明参数
type : String
Action实例执行的操作类型。当前只支持"submit"和"load"这两种方式
提交动作(Ext.form.action.Submit,formaction: submit)
继承于Ext.form.action.Action
这个类用来处理用Form提交数据,并可以处理应答的返回值。
标准的响应包
success property : Boolean - 必须。
errors property : Object - 可选,包含无效的表单项的错误信息。
json示例
{
success: false,
errors: {
clientCode: "Client not found",
portOfLoading: "This field must not be null"
}
}
响应中的其它数据可在回调函数中通过result属性访问
表单元素基类(Ext.form.field.Base,xtype: field)
继承于Ext.Component
配置选项
name : String
表单项名称
value : Object
表单项的初始化值
inputType : String
输入类型 radio,text,password,file
fieldLabel : String
标签。它被附加了labelSeparator, 其位置和大小被labelAlign、 labelWidth和labelPad配置确认。
hideLabel : Boolean
设置为true时,完全隐藏标签元素
labelAlign : String
控制fieldLabel的位置和对齐方式
"left" (默认) - 标签位于域的左边,其文本左对齐。其宽度由labelWidth配置确定。
"top" - 标签位于域的顶端。
"right" - 标签位于域的右边,其文本右对齐。其宽度由labelWidth配置确定。
labelPad : Number
标签和输入域之间的像素间隔
labelSeparator : String
插入到fieldLabel后面的字符。
labelWidth : Number
标签宽度。只适用于 labelAlign设置了“left”或“right”
readOnly : Boolean
只读
submitValue : Boolean
是否提交表单值
activeError : String
当第一次显示组件时,显示这个值作为其错误提示消息。
方法
getValue( ) : Object
返回表单项当前的数据值
getRawValue( ) : String
返回表单项的原始值
setValue( Object value ) : Ext.form.field.Field
在表单项中设置一个数据值,并经过变化验证和有效验证
setRawValue( Object value ) : Object
直接设置表单项原始值,不通过 value conversion转换、变化检测和验证。
isValid( ) : Boolean
返回表单值是否验证通过
文本框(Ext.form.field.Text, xtype: textfield)
继承于Ext.form.field.Base
示例
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // 表单项非空
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // 表单项需填email格式
}]
});
配置选项
allowBlank : Boolean
指定为false将会只允许值的长度>0(默认为true)
blankText : String
如果allowBlank校验失败时显示的出错文本
emptyText : String
放置到空表单项中的默认文本(默认为null)
maxLength : Number
校验时表单项允许输入的最大长度。
maxLengthText : String
如果 *maximum length** 校验失败时显示的出错文本
minLength : Number
输入栏必须的最小长度(默认为0)
minLengthText : String
如果 minimum length 校验失败时显示的出错文本
regex : RegExp
在校验时,需要在表单项值纸上进行测试的JavaScript RegExp对象
regexText : String
如果使用了regex并且在校验失败了显示的出错文本
selectOnFocus : Boolean
true当表单项获得输入焦点时,将会自动选中所有存在的表单项文本 (默认为false)
maskRe : RegExp
一个输入掩码正则表达式,用来过滤不匹配的按键(默认为null)
stripCharsRe : RegExp
一个JavaScript RegExp对象,用来在校验之前从值中去除不想要的内容
validator : Function
在表单项校验(getErrors)中自定义的调用的校验函数 ,参数为 值,返回值为boolean
vtype : String
一个校验类型名,在Ext.form.field.VTypes中定义
vtypeText : String
一个自定义的出错消息,用来替代为当前表单项所设置的vtype所提供的默认消息
grow : Boolean
true 如果此表单项需要自动增长、收缩到它的内容长度(默认为false)
方法
getErrors( Object value ) : String[]
根据表单项的校验规则对值进行校验,并且为所有校验失败的情况返回 一个出错数组。
下拉列表(Ext.form.field.ComboBox, xtype: combobox, combo)
继承于Ext.form.field.Text
ComboBox就像是传统的HTML文本 域和 域的综合;
用户可以自由的在域中键入,或从下拉选择列表中选择值。
默认用户可以输入认可值,即使它没有出现在选择列表中;
设置forceSelection为“true”,以阻止自由格式的值,并将其限制在列表中的项。
示例
固定选项
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
从服务器读取选项
{
margins:'3 0 0 10',
xtype: 'combo',
store:{
fields: ['code', 'codevalue'],
proxy: {
type: 'ajax',
url: '/dictionary/searchDictionary?classType=15',
reader: {
type: 'json',
root: 'dataList'
}
}
},
queryMode: 'remote',
displayField: 'codevalue',
valueField: 'code',
fieldLabel: '客户端类型',
width:180,
editable:false,
labelWidth:70,
value:'',
name: 'clienttype'
}
配置选项
displayField : String
名称 对应的字段
valueField : String
值 对应的字段
valueNotFoundText : String
当没有值时的默认值
editable : Boolean
设置为false阻止直接在表单项的文本框中输入字符
forceSelection : Boolean
true时,只能从选项中选择值,false时,允许用户手动输入值
emptyText : String
放置到空表单项中的默认文本
allowBlank : Boolean
是否允许为空
blankText : String
如果allowBlank校验失败时显示的出错文本
multiSelect : Boolean
是否允许多选
delimiter : String
当multiSelect = true时,用于分隔多个选定的项的字符。
selectOnFocus : Boolean
true当表单项获得输入焦点时,将会自动全选已输入的文本。只在 editable设置为true有效
queryParam : String
store传递键入字符串使用的参数名
triggerAction : String
触发器被点击时执行的操作
'all' 指定allQuery配置项执行查询
'query' 使用原始值执行查询。
vtype : String
一个校验类型名
vtypeText : String
一个自定义的出错消息
maskRe : RegExp
一个输入掩码正则表达式,用来过滤不匹配的按键(默认为null) Note: 不过滤已经输入的字符
msgTarget : String
错误消息文本应该显示的位置。
qtip 当用户鼠标悬停在该域之上时显示包含了消息的迅速提示。这是默认的。
title 显示消息在默认浏览器title属性弹出。
under 在域下方添加一块包含了错误消息的div。
side 添加一个错误图标在域的右边,鼠标悬停上面时弹出显示消息。
none 不显示任何错误消息。这可能对如果要实现自定义错误显示有用。
[element id] 直接把错误消息添加到一个指定元素的innerHTML。
queryCaching : Boolean
为true时,当当前查询和上一次查询一样时,该项阻止combo重复查询(本地或远程)。
queryMode : String
ComboBox使用已配置的store的模式
remote 远程
local 本地
多行文本框(Ext.form.field.TextArea,xtype: textareafield, textarea)
继承于Ext.form.field.Text
示例
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
anchor : '100%'
}]
});
配置选项
rows : Number
多行文本框'rows'属性的初始值
cols : Number
多行文本框'cols'属性的初始值
enterIsSpecial : Boolean
如果你想把回车键当作一个特殊的按键输入值并且当回车键按下时可以触发specialkey事件,需要把enterIsSpecial属性设为true
growMax : Number
当grow=true时,多行文本框允许的最大高度
growMin : Number
当grow=true时,多行文本框允许的最小高度
preventScrollbars : Boolean
true将会阻止出现滚动条,无论表单项中有多少文本
日期控件(Ext.form.field.Date,xtype: datefield)
继承于Ext.form.field.Text
示例
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
// The value matches the format; will be parsed and displayed using that format.
format: 'Y-m-d',
value: '1978-4-2'
}]
});
配置属性
format : String
默认的日期格式字符串,可以根据使用场景的需要对其进行重写(Y-m-d)
submitFormat : String
提交到服务端时使用的日期格式。这个格式必须是符合 Ext.Date.parse要求的字符串
maxValue : Date/String
允许的最大日期。可以是一个有效的javascript日期对象,也可以是一个符合格式要求的字符串日期
maxText : String
当日期晚于maxValue展示的错误文本
minValue : Date/String
允许的最小日期。可以是一个有效的javascript日期对象,也可以是一个符合格式要求的字符串日期。
minText : String
当日期早于minValue展示的错误文本
showToday : Boolean
设置为false时隐藏日期下拉框页脚的today按钮,并禁用空格键选中当前日期
invalidText : String
当日期无效时展示的错误文本
disabledDays : Number[]
禁用的日期数组(对应一周中的7天), 从0开始
disabledDaysText : String
当日期落在一个无效的日期(对应一周中的7天)时的提示
altFormats : String
使用‘|’区分的多种时间格式,这些格式被用来验证用户的输入项是否是匹配的时间格式
disabledDates : String[]
字符串格式的禁用日期数组。这些字符串将被用来构建一个动态的正则表达式
文件上传控件(Ext.form.field.File,xtype: filefield, fileuploadfield)
继承于Ext.form.field.Text
示例
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
配置选项
buttonText : String
上传按钮显示的文本值
复选框(Ext.form.field.Checkbox,xtype: checkboxfield, checkbox)
继承于Ext.form.field.Base
示例
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Pizza Order',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'Toppings',
defaultType: 'checkboxfield',
items: [
{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}
]
}
],
renderTo: Ext.getBody()
});
配置属性
boxLabel : String
一个可选的文本标签,它显示在checkbox的旁边
boxLabelAlign : String
boxLabel展示在checkbox旁边的相对位置。可使用'before' 和'after'
checked : Boolean
如果要让checkbox在渲染后初始化为选中的状态,设置为true
handler : Function
当checked值改变的时候调用的函数(可以用来代替change 事件)
scope : Object
一个被用来当作作用域('this'的引用)的对象,作用于handler函数
inputValue : String
这个值被当作是一般的input元素的值,当form提交时它被作为一个参数提交
uncheckedValue : String
当这个属性被配置的时候,当form提交时如果checkbox没有被选中则使用这个值作为checkbox的值提交
相关对象
复选按钮组(Ext.form.CheckboxGroup,xtype: checkboxgroup)
继承于Ext.form.FieldContainer-->Ext.container.Container
配置属性
columns : String/Number/Number[]
当使用自动布局显示分组化的checkbox/radio控制器时,指定所使用的列数
vertical : Boolean
True将跨列分配所包含的控制器,从上到下完全填满一列,然后再开始新的一列
fieldLabel : String
域标签
方法
getChecked( ) : Ext.form.field.Checkbox[]
返回容器中当前被选中的checkbox数组
reset( )
将表单项的当前值重置为以前加载时的值, 并且清除所有校验信息
单选框(Ext.form.field.Radio,xtype: radiofield, radio)
继承于Ext.form.field.Checkbox
示例
Ext.create('Ext.form.Panel', {
title : 'Order Form',
width : 300,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [
{
xtype : 'fieldcontainer',
fieldLabel : 'Size',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'M',
name : 'size',
inputValue: 'm',
id : 'radio1'
}, {
boxLabel : 'L',
name : 'size',
inputValue: 'l',
id : 'radio2'
}
]
}]
});
方法
getGroupValue( ) : String
如果这个radio是radio按钮组的一部分, 将返回被选中的值
相关对象
单选按钮组(Ext.form.RadioGroup,xtype: radiogroup)
继承于Ext.form.CheckboxGroup
配置选项
allowBlank : Boolean
True允许组中每个元素都是空的
blankText : String
如果 allowBlank验证失败,错误文本将显示
隐藏域(Ext.form.field.Hidden,xtype: hiddenfield, hidden)
继承于Ext.form.field.Base
html编辑器(Ext.form.field.HtmlEditor,xtype: htmleditor)
继承于Ext.Component
示例
Ext.create('Ext.form.HtmlEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody()
});
配置选项
defaultValue : String
放置到编辑器中的一个默认值,用来解决获得焦点的问题
enableAlignments : Boolean
启用左对齐、中间对齐、右对齐按钮
enableColors : Boolean
启用回退/高亮颜色按钮
enableFont : Boolean
启用选择字体按钮。Safari浏览器不支持该属性
enableFontSize : Boolean
启用增加/减小字号的按钮
enableLinks : Boolean
启用链接创建按钮。Safari浏览器不支持该属性
enableSourceEdit : Boolean
启用切换到源编辑按钮。Safari浏览器不支持该属性
Ext.data.Connection
Connection类用来发送ajax请求
继承于Ext.Base
配置属性
defaultHeaders : Object
一个包含请求头信息的对象, 此头信息将被添加到每次请求中
disableCaching : Boolean
'true'表示在发送GET方式的请求时, 为请求链接添加一个不重复的标识参数以禁用缓存
disableCachingParam : String
使用追加参数的方式禁用请求缓存时, 追加的参数名称
extraParams : Object
添加到请求中的参数
method : String
发送请求使用的默认的HTTP发送方式('POST','GET')
timeout : Number
设置请求的超时时间(毫秒)
方法
rquest( Object options ) : Object
向一个远程服务器发送HTTP请求,返回值为request对象. 可以用来取消当前请求
参数对象的属性
//由于此参数对象还会作为参数传给回调函数, 所以此对象中还可以包含一些其他的自定义参数用于在回调函数中处理
url : String/Function
发送请求的URL, 或一个返回URL字符串的函数, 函数的作用域为scope属性值. 默认为当前Connection对象的url属性值.
params : Object/String/Function
一个包含所有发送给服务器的请求参数的属性对象, 或一个url编码 字符串, 或一个能返回前二者之一的函数. 函数的作用域为scope属性值.
method : String
请求使用的HTTP方式, 默认为当前Connection对象的method属性值, 或当method为空时, 无参数就使用"GET", 有参数就使用"POST". 注意: 此参数名称是区分大小写的, 所以应该全为大写.
callback : Function
在收到HTTP响应之后调用的函数. 此回调函数无论响应结果为成功或失败都会执行
参数:
options : Object
调用request函数时的参数.
success : Boolean
如果请求成功则为'true'.
response : Object
包含了响应数据的XMLHttpRequest对象.
success : Function
在请求成功返回时调用此函数
参数:
response : Object
包含了响应数据的XMLHttpRequest对象.
options : Object
调用request函数时的参数.
failure : Function
在请求返回失败时调用此函数
参数:
response : Object
包含了响应数据的XMLHttpRequest对象.
options : Object
调用request函数时的参数.
timeout : Number
本次请求的超时时间(毫秒).默认为30秒.
form : Ext.Element/HTMLElement/String
提交参数的表单的 元素对象或 元素的ID
isUpload : Boolean
仅当与form参数一同使用时有意义.
'true'表示表单对象是一个文件上传栏(当form表单设置了属性enctype "multipart/form-data"时, 此参数自动为'true').
headers : Object
请求头信息.
xmlData : Object
发送的XML文本. 注意: 使用此参数将取代params参数来发送请求数据. 所有params中的参数将被追加到URL后面.
jsonData : Object/String
发送的JSON数据. 注意: 使用此参数将取代params参数来发送请求数据. 所有params中的参数将被追加到URL后面.
disableCaching : Boolean
设为'true'时即会在GET方式的请求中添加一个不重复的参数来禁用缓存.
upload( String/HTMLElement/Ext.Element form, String url, String params, Object options )
使用一个隐藏的iframe上传form表单
parseStatus( Number status ) : Object
判断响应状态是否为成功
事件
beforerequest( Ext.data.Connection conn, Object options, Object eOpts )
当一个请求数据对象的网络请求发送前触发此事件
requestcomplete( Ext.data.Connection conn, Object response, Object options, Object eOpts )
当一次请求成功完成时触发此事件
requestexception( Ext.data.Connection conn, Object response, Object options, Object eOpts )
当服务器返回一个HTTP错误状态值时触发此事件
Ext.Ajax
是Ext.data.Connection的一个单例。专门用于与服务端代码进行交互的
示例
Ext.Ajax.request({
url: 'page.php',
params: {
id: 1
},
success: function(response){
var text = response.responseText;
// process server response here
}
});
通过修改Ext.Ajax类的属性,可以设置所有请求的默认配置(会被request方法中的配置覆盖):
Ext.Ajax.timeout = 60000; // 60秒
属性
defaultHeaders : Object
一个包含了请求头信息的对象,将会添加到使用当前对象发出的每一个请求中
disableCaching : Boolean
如果为true,将会在GET请求中添加一个cache-buster(缓存杀手)。默认为true
extraParams : Object
一个带有属性值的对象,用来给每一个使用当前对象发出的请求附加额外的参数
method : String
默认使用的HTTP请求方式。注意,这个配置项是大小写敏感的,所有字母都应该大写
timeout : Number
请求的超时时间,单位毫秒。默认为30000。
url : String
向服务器发送请求时默认使用的URL
示例程序
菜单
页面
后台
public static void menu(){
String json = "[{text:'节点1',leaf:true,url:'http://www.baidu.com'},{text:'节点2',leaf:true}]";
renderText(json);
}
研究项目代码
表单组件
分页
自己写
内置类型
树从后台加载数据
ajax
日期格式化
你可能感兴趣的:(工作笔记)
给Centos7.9安装宝塔管理面板_添加SpringBoot网站_配置SSL_开启https_申请阿里云免费域名SSL证书_以及域名备案_微信小程序自助开发开源平台---网站部署工作笔记0001
添柴程序猿
宝塔面板centos宝塔面板https配置ssl证书申请小程序低代码
备案是必须的,微信小程序要求备案,要不是就会弹出框,提示,很不友好,没办法还是备案吧...要不然即使nginx配置了https,那么用https访问网址也访问不了,只能用https://ip地址来访问宝塔面板是一个用来远程管理centos服务器用的工具,安装以后会生成一个地址,用浏览器访问,就可以使用宝塔面板,一键安装mysql,配置管理网站,配置nginx等用起来非常方便关于注册以及登录宝塔:h
工作笔记 | 音视频开发与学习提升
军事研究员
25.音视频编解码笔记音视频学习
工作笔记|音视频开发与学习提升时间:2025年2月6日09:22:32文章目录工作笔记|[音视频开发与学习提升](https://blog.csdn.net/I_feige/article/details/145459448?sharetype=blogdetail&sharerId=145459448&sharerefer=PC&sharesource=I_feige&spm=1011.2480
WGCLOUD的【工作笔记】功能使用介绍
服务器运维kubernetes
WGCLOUD的【工作笔记】是一个完全辅助的模块,和监控没有关系它纯粹用来记录我们的一些笔记,比如工作内容,日报,知识等等都可以,非常方便它只需要添加删除维护就可以了,这是一个非常轻量又实用的功能如下图
8/23工作笔记
steven~~~
笔记
要做的事情先测试:参数测试和偏度等测试测试的时候没有把因子的名字改掉,都弄成筹码波动性了,看看要不要改,啊我死了,这里需要看一下要不要改。。。然后测一下几个新的因子再想朋友圈文案回测笔记在config文件中,找到factors文件夹下面所有的因子,然后在脚本1中计算所有的因子值报错Traceback(mostrecentcalllast):File"E:\xingbuxing\中性策略框架2.1.
日记~2023年1月4日 星期三 晴
月儿琬琬的梦想30
今日故事:白天工作,月初事情比较多,加上才来公司没多久,很多报表都不熟悉,加上研究和优化的时间,就显得忙碌起来,一天时间过的很快。早上路上把今日读书完成,工作笔记和日记完成,晚上班车上整理了这一周所有的文章统一在今日头条,和007平台发布。晚上加班两小时后,将读书笔记写完。收获&反思:今日事,今日毕,今天开始,每天的任务当天完成,1号到3号的进度都已更新完毕。每天一篇日记,一篇工作笔记,一个读书笔
c# 获取mac地址
AfterConfession
c#
工作笔记20230328.在C#中,可以使用NetworkInterface类来获取本地计算机的MAC地址。usingSystem.Net.NetworkInformation;publicstringGetMACAddress(){stringmacAddress="";foreach(NetworkInterfacenicinNetworkInterface.GetAllNetworkInte
人工智能_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_001---人工智能工作笔记0096
脑瓜凉
人工智能向量机&爬虫人工智能ChatGLM清华大模型大模型安装CPU安装大模型ChatGLM-6B
使用centos安装,注意安装之前,保证系统可以联网,然后执行yumupdate先去更新一下系统,可以省掉很多麻烦20240219_150031这里我们使用centos系统吧,使用习惯了.ChatGlm首先需要一台个人计算机,或者服务器,要的算力,训练最多,微调次之,推理需要算力最少其实很多都支持CPU,但为什么要用GPU,因为CPU,占用内存要32G以上,然后,CPU回答问题,需要十几分钟或者半
人工智能_PIP3安装使用国内镜像源_安装GIT_普通服务器CPU_安装清华开源人工智能AI大模型ChatGlm-6B_002---人工智能工作笔记0097
脑瓜凉
聚类支持向量机&爬虫人工智能ChatGLM模型大模型安装CPU安装大模型ChatGLM大模型安装ChatGLM-6B
接着上一节来看,可以看到,这里创建软连接以后[[email protected]]#ln-s/usr/local/python3/bin/python3/usr/bin/python3[[email protected]]#python3-VPython3.10.8[[email protected]]#pwd/usr/local/Pyt
工作笔记---js和java共同完成大写锁定提示
code-code-code
javajsjavascript工作
1.初始化CapsLock状态。暂找不到js判断CapsLock状态的方法,于是只能想办法从java下手。引用:“JavaScript只提供对键盘的监听事件,它无法获取客户端硬件信息(IE下可以通过ActiveXObject对象获得),更无法获得客户端硬件的状态,这是JavaScript语言的限制,所以它只能监听用户对键盘的响应事件,才能判断用户当前的按键是处于大小还是小写状态。目前网络上所有判断
HR工作笔记丨如何进行岗位分析
杰然不同的生活
岗位分析工作是HR日常工作中的最基础部分,在实际操作中,工作岗位分析是招聘、选拔、任用合格员工的基础;为员工考评、晋升提升依据;是企业改进工作设计、优化劳动环境的必要条件;也是制定有效人力资源规划、进行各类人才供给和需求预测的重要前提。一、什么是岗位分析岗位分析是对企业各类岗位的性质、任务、职责、劳动条件和环境,以及员工承担本岗位任务应具备的资格条件所进行的系统分析与研究,并由此制订岗位规范、工作
《别告诉我你会记笔记》
mao77_
1.需要准备什么准备三个工作笔记本记事笔记本存储灵感/任务管理使用A6纸(105mm*148mm)/A7无论何时都能拿出来记录片段式信息建议可撕式笔记本/装订式笔记本可以撕下来贴在航母笔记本上。并将决定和与之对应的策略一并记录在航母笔记本上航母笔记本A5尺寸充实记录内容,进一步提升、扩充可以将复印的重要资料/文件贴在上面可编写商谈结论、会议内容、工程进度管理、策划案底稿等任务草稿的功能。最后可以整
【工作笔记】IOT.js适配AWorks平台通用外设接口(3):I2C
天上下橙雨
一、前言近期因工作需求学习了一下IOT.js和AWorks平台通用外设接口(包括:ADC、GPIO、I2C、PWM、SPI和UART),并将它们逐一适配到IOT.js中,为后续AWTK-MVMM的JS项目支持平台外设调用奠定基础,此处做笔记记录一下。【工作笔记】IOT.js适配AWorks平台通用外设接口(1):ADC;【工作笔记】IOT.js适配AWorks平台通用外设接口(2):GPIO;【工
为了忘却的记录
晴耕雨读管见
《别告诉我你会做笔记》属职场类读物,曾荣获日本“商业图书大奖”第一名。作者认为,做笔记是一种重要的工作技能,做不做工作笔记、会不会做工作笔记是职场达人和普通职员的最大区别。因为工作笔记记录的是自己独有的经验教训,能提高效率,扩大成果,快速推动个人成长。更奇特的是,和学习笔记不同,工作笔记是为“遗忘”而准备的。把工作过程中的体会、设想、实际结果以及有关的其它信息及时、简单记录,就可以暂时不用去想,从
458/1000:每周复盘——第二十周
马幸运
本周计划完成情况:本周的三个21打卡,还落下两个。争取明天把这个两个小打卡打完。最近工作笔记忙,加上工作也比较忙。基本没有太多时间早睡。整个人困得不行。今天下午,上了古筝课,老师布置了新的作业。晚上上了直播课,结束都十一点了。明天把工作还要进行收尾和补卡。还有可能是比较充实的一天。下周计划:1.准时完成日更。2.给家人至少打一次电话。3.坚持每天看书10页。4.每周敷一次面膜。5.每天走路保持60
带娃的日常20211013——妹妹的第一次线下家长会
凝飞呀
今天妹妹幼儿园召开第一次线下家长会,知道自己记性不好,特意给妹妹准备了一个家长会专用记录本。顺带整理了最近手边的笔记本,居然有六个:阅读摘录本、生活日记本、工作笔记本、家庭会议记录本、儿子的家长会记录本、女儿的家长会记录本。还有以前的近二十本日记本和十本工作笔记本。看来是写惯了烂笔头,有点难以割舍了。虽然现在用手机拍照或录音都很方便,但回看的机率很小,甚至不要两年手机都换了。我还是更喜欢把重点总结
工作笔记——海康威视网络摄像头接入华为云VIS服务
⚠小白出没⚠
网络华为云音视频
激活摄像头海康威视需要先下载设备网络搜索软件(SADP)激活摄像头。然后配置摄像头IP与电脑同一个网段。如何配置:win+R->cmd打开控制台输入ipconfig找到下图这个(如果你是连的无线网的话)就照着这个填子网掩码和默认网关就行了接入华为云平台注意:配置摄像头之前要先根据华为云的文档创建国标和设备使用IE浏览器输入摄像头内网,我这里是192.168.1.64进入后台后点击配置->网络->高
职场总动员来自《老秘书工作笔记》
80bfb801f293
老话说姜还是老的辣,初入职场的小白,待人接物都要有所学习受教,网上流传着一个商务接待的经典案例。公司迎来了大客户,一行十多人,全程由领导秘书Selina接待。第二天,客户团队有一位高管因急事需次日早上6点半坐飞机离开。Selina在第二天客户上车后,变戏法似的拿出了三种早餐、一杯热茶、口罩及感冒药,还有地方特产。客户因为这些行为,觉得对方公司很可靠促成了之间的大合作!这个事例是不是有点眼熟,它与《
4月7日工作笔记
安谛瑜伽阿明
今天查楼虽然很辛苦,但是同志们很有干劲儿,和大家在一起工作很开心,同事之间要互相帮助才行,我们是一个集体
vue工作笔记001
萌吃闷吃
disabled="true";//typeof()true类型为string:disabled="true";//typeof()true类型为boolean
利用nginx替换Docker内部程序_静态资源_实现自定义背景--nginx工作笔记008
脑瓜凉
nginxdockernginx重定向静态资源nginx重定向静态资源图片nginx修改docker
因为有个程序是打包的Docker镜像,那么问题就来了,我想修改登录页面上的一个图片,如果你不想再去修改程序了,那么怎么办?你可以这样,让nginx请求某个图片的时候,自动给他重定向,访问其他的图片资源,很好用:来看看怎么做吧:server{listen9003;server_namelocalhost;location/img{root/data;}location/{#dataeaseproxy
Ruoyi-Cloud-Plus_Nacos配置服务漏洞CVE-2021-29441_官方解决方法以及_修改源码解决---SpringCloud工作笔记199
脑瓜凉
springcloud笔记Nacos漏洞CVE-2021-29441Nacos无法注册
CVE-2021-29441这个漏洞是Nacos的,通过使用postman,直接访问接口:就可以直接添加nacos的用户Nacos是Alibaba的一个动态服务发现、配置和服务管理平台。攻击者通过添加Nacos-Server的User-Agent头部将可绕过(nacos.core.auth.enabled=true)鉴权认证,从而进行API操作。直接get方法访问这个地址:'http://your
ubuntu22.04@laptop 常用基础环境安装
lida2003
Linux开源linuxubuntu
ubuntu22.04@laptop常用基础环境安装1.源由2.步骤2.1安装ubuntu22.04LTS系统2.2必备软件安装2.3基本远程环境2.3.1远程ssh登录2.3.2samba局域网2.3.3VNC远程登录2.4开发环境安装3.总结1.源由应朋友要求,整理下一个个人常用的工作笔记本常用开发环境安装步骤。2.步骤2.1安装ubuntu22.04LTS系统下载ubuntu22.04LTS
你需要的武功秘籍在这里-《老秘书工作笔记》
尤筱鱼
前段时间,有一个小姑娘火遍全网,人称"董秘",格力集团董事长董明珠的秘书孟羽童。董明珠在中国制造业领袖峰会上,向大家介绍孟羽童,她高调宣布:“我想把她培养成第二个董明珠”。才22岁刚毕业的职场小白,又不是对口专业的孟羽童到底凭什么能力让董明珠青睐,直接入职格力集团成为董事长秘书?素有"商界铁娘子"之称的董明珠在采访中说过:孟羽童能吃苦,很活跃会创新,学习能力强,内心强大,抗压能力强,从她身上看上了
2019.3.26
学思悟践
时间统计:1.早上起床7点10分左右2.早上陪大宝看书15min(时间虽少,但也需坚持,早点起来就更好了!但不强求为好)3.早上上班2.5h(看检察日报开始了检察工作笔记,魏科指导了我一下,非常感谢,又进一大步,学习也是工作,找到了数据线比较开心)4.中午休息2h(今天睡着了挺好的)5.下午上班3h(市院领导来,跟着听学,做读书笔记10min,维护两微一端,收文等)6.早上和zh,wy聊天20mi
工作笔记
1df7201fa356
工作一月有余了,通过这一个多月的学习,终于掌握了具体的工作内容。对于如何寻找合作机会也掌握了,每次打电话都能准确找到切入点。对接客户和领导也能做到得心应手了。接下来希望尽快出业绩。
23年9月-11月工作笔记整理(前端)
wj_秦桑低绿枝
笔记前端arcgis
目录一、小Tips二、原理学习一、小Tips1.this.refs获取不到的话,就使用this.$nextTick(()=>{})2.提交代码的时候执行gitcommit–no-verift-m“提交备注”,就可以跳过代码检查3.window.open()新打开页面跳转遇到权限问题为单独打开可以,通过这个方法打开不行解决办法:4.监听chart对象进行自适应缩放//通过ResizeObserver
23年12月-24年1月工作笔记整理(前端)
wj_秦桑低绿枝
笔记前端
目录一、css知识二、js知识三、需求技术一、css知识1.css实现文字描边(白底黑边)-webkit-text-stroke:1px#000;color:#fff;font-weight:900;2.css子元素平分父元素的宽度父元素{display:flex;}子元素{flex:1}二、js知识1.dayjs拿月份的最后一天日期//2020年2月结束日期时间dayjs('2020-02').
家和万事兴
木子初见2019
日更day349/y2-----------------------------------------------刚刚停下来,今晚的“战斗”可以结束了。三个小时,把书房里没整完的资料全部整理完了。看上去整洁多了。工作笔记还是没舍得扔,又找了地方放起来。休息时间,来完成今天的日更。今天是大年初一,尽管昨天熬到零点以后,早上七点多,还是起床了。要去拜年啊。面包,芝麻糊,煮鸡蛋,简单的早餐过后,就出发
2019/08/04工作笔记
丹凤Ulianyoga
可能因为前两天加资源PK比赛大家都非常努力,也非常辛苦,所以这两天大家可能还没有缓过劲来吧,稍微有点放松,昨天晚上确实我们外面的睡的挺晚的,夏天回来时候好像快十二点了,我们还没有关灯,宿舍还闹哄哄的,作为一个店的店长请假回来后看到大家是这种不自律的状态,确实心里会很难过,所以早上9:00点集合的时候,夏天给我们开会,说着说着,控制不住情绪就哭了,当时大家心里其实都是不好受的。其实夏天店长平时真的对
哪款笔记软件支持电脑和手机互通数据?
c18069344077
笔记智能手机
上班族在日常工作中,随手记录工作笔记已成为司空见惯的场景。例如:从快节奏的会议记录到灵感迸发的创意;跟踪项目进展,记录每个阶段的成果、问题和下一步计划;记录、更新工作任务清单等,工作笔记承载了职场人士丰富多彩的工作生活。为了能够随时随地记录工作事项,越来越多的职场人士提出了自己的使用需求:一款PC电脑和手机互通的好用笔记软件。那么哪款笔记软件好用,支持电脑、手机云同步使用呢?很庆幸的是,我找到了敬
java短路运算符和逻辑运算符的区别
3213213333332132
java基础
/*
* 逻辑运算符——不论是什么条件都要执行左右两边代码
* 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的
* 原理很简单,并联电路代表短路或(||),串联电路代表短路与(&&)。
*
* 并联电路两个开关只要有一个开关闭合,电路就会通。
* 类似于短路或(||),只要有其中一个为true(开关闭合)是
Java异常那些不得不说的事
白糖_
javaexception
一、在finally块中做数据回收操作
比如数据库连接都是很宝贵的,所以最好在finally中关闭连接。
JDBCAgent jdbc = new JDBCAgent();
try{
jdbc.excute("select * from ctp_log");
}catch(SQLException e){
...
}finally{
jdbc.close();
utf-8与utf-8(无BOM)的区别
dcj3sjt126com
PHP
BOM——Byte Order Mark,就是字节序标记 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF。而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前,先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
JAVA Annotation之定义篇
周凡杨
java注解annotation入门注释
Annotation: 译为注释或注解
An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
tomcat的多域名、虚拟主机配置
g21121
tomcat
众所周知apache可以配置多域名和虚拟主机,而且配置起来比较简单,但是项目用到的是tomcat,配来配去总是不成功。查了些资料才总算可以,下面就跟大家分享下经验。
很多朋友搜索的内容基本是告诉我们这么配置:
在Engine标签下增面积Host标签,如下:
<Host name="www.site1.com" appBase="webapps"
Linux SSH 错误解析(Capistrano 的cap 访问错误 Permission )
510888780
linuxcapistrano
1.ssh -v [email protected] 出现
Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
错误
运行状况如下:
OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013
debug1: Reading configuratio
log4j的用法
Harry642
javalog4j
一、前言: log4j 是一个开放源码项目,是广泛使用的以Java编写的日志记录包。由于log4j出色的表现, 当时在log4j完成时,log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类,但当时jdk1.4已接近完成,所以sun拒绝使用log4j,当在java开发中
mysql、sqlserver、oracle分页,java分页统一接口实现
aijuans
oraclejave
定义:pageStart 起始页,pageEnd 终止页,pageSize页面容量
oracle分页:
select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart
sqlServer分页:
Hessian 简单例子
antlove
javaWebservicehessian
hello.hessian.MyCar.java
package hessian.pojo;
import java.io.Serializable;
public class MyCar implements Serializable {
private static final long serialVersionUID = 473690540190845543
数据库对象的同义词和序列
百合不是茶
sql序列同义词ORACLE权限
回顾简单的数据库权限等命令;
解锁用户和锁定用户
alter user scott account lock/unlock;
//system下查看系统中的用户
select * dba_users;
//创建用户名和密码
create user wj identified by wj;
identified by
//授予连接权和建表权
grant connect to
使用Powermock和mockito测试静态方法
bijian1013
持续集成单元测试mockitoPowermock
实例:
package com.bijian.study;
import static org.junit.Assert.assertEquals;
import java.io.IOException;
import org.junit.Before;
import org.junit.Test;
import or
精通Oracle10编程SQL(6)访问ORACLE
bijian1013
oracle数据库plsql
/*
*访问ORACLE
*/
--检索单行数据
--使用标量变量接收数据
DECLARE
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
BEGIN
select ename,sal into v_ename,v_sal
from emp where empno=&no;
dbms_output.pu
【Nginx四】Nginx作为HTTP负载均衡服务器
bit1129
nginx
Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统,通过负载均衡服务器,可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器,可以带来很多好处:
负载均衡的好处
增加可用资源
增加吞吐量
加快响应速度,降低延时
出错的重试验机制
Nginx主要支持三种均衡算法:
round-robin
l
jquery-validation备忘
白糖_
jquerycssF#Firebug
留点学习jquery validation总结的代码:
function checkForm(){
validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID
errorElement :"span",// 使用"div"标签标记错误, 默认:&
solr限制admin界面访问(端口限制和http授权限制)
ronin47
限定Ip访问
solr的管理界面可以帮助我们做很多事情,但是把solr程序放到公网之后就要限制对admin的访问了。
可以通过tomcat的http基本授权来做限制,也可以通过iptables防火墙来限制。
我们先看如何通过tomcat配置http授权限制。
第一步: 在tomcat的conf/tomcat-users.xml文件中添加管理用户,比如:
<userusername="ad
多线程-用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
bylijinnan
java多线程
public class IncDecThread {
private int j=10;
/*
* 题目:用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
* 两个问题:
* 1、线程同步--synchronized
* 2、线程之间如何共享同一个j变量--内部类
*/
public static
买房历程
cfyme
2015-06-21: 万科未来城,看房子
2015-06-26: 办理贷款手续,贷款73万,贷款利率5.65=5.3675
2015-06-27: 房子首付,签完合同
2015-06-28,央行宣布降息 0.25,就2天的时间差啊,没赶上。
首付,老婆找他的小姐妹接了5万,另外几个朋友借了1-
[军事与科技]制造大型太空战舰的前奏
comsci
制造
天气热了........空调和电扇要准备好..........
最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........
所以,我们不得不关
dateformat
dai_lm
DateFormat
"Symbol Meaning Presentation Ex."
"------ ------- ------------ ----"
"G era designator (Text) AD"
"y year
Hadoop如何实现关联计算
datamachine
mapreducehadoop关联计算
选择Hadoop,低成本和高扩展性是主要原因,但但它的开发效率实在无法让人满意。
以关联计算为例。
假设:HDFS上有2个文件,分别是客户信息和订单信息,customerID是它们之间的关联字段。如何进行关联计算,以便将客户名称添加到订单列表中?
&nbs
用户模型中修改用户信息时,密码是如何处理的
dcj3sjt126com
yii
当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦,所有我想分享一下我是怎么处理的。
场景是使用的基本的那些(系统自带),你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。
面是它的工作流程: 当创建用户的时候密码需要加密并且保存,但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密,这
中文 iOS/Mac 开发博客列表
dcj3sjt126com
Blog
本博客列表会不断更新维护,如果有推荐的博客,请到此处提交博客信息。
本博客列表涉及的文章内容支持 定制化Google搜索,特别感谢 JeOam 提供并帮助更新。
本博客列表也提供同步更新的OPML文件(下载OPML文件),可供导入到例如feedly等第三方定阅工具中,特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
js去除空格,去除左右两端的空格
蕃薯耀
去除左右两端的空格js去掉所有空格js去除空格
js去除空格,去除左右两端的空格
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
SpringMVC4零配置--web.xml
hanqunfeng
springmvc4
servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置。
ServletContainerInitializer:启动容器时负责加载相关配置
package javax.servlet;
import java.util.Set;
public interface ServletContainer
《开源框架那些事儿21》:巧借力与借巧力
j2eetop
框架UI
同样做前端UI,为什么有人花了一点力气,就可以做好?而有的人费尽全力,仍然错误百出?我们可以先看看几个故事。
故事1:巧借力,乌鸦也可以吃核桃
有一个盛产核桃的村子,每年秋末冬初,成群的乌鸦总会来到这里,到果园里捡拾那些被果农们遗落的核桃。
核桃仁虽然美味,但是外壳那么坚硬,乌鸦怎么才能吃到呢?原来乌鸦先把核桃叼起,然后飞到高高的树枝上,再将核桃摔下去,核桃落到坚硬的地面上,被撞破了,于是,
JQuery EasyUI 验证扩展
可怜的猫
jqueryeasyui验证
最近项目中用到了前端框架-- EasyUI,在做校验的时候会涉及到很多需要自定义的内容,现把常用的验证方式总结出来,留待后用。
以下内容只需要在公用js中添加即可。
使用类似于如下:
<input class="easyui-textbox" name="mobile" id="mobile&
架构师之httpurlconnection----------读取和发送(流读取效率通用类)
nannan408
1.前言.
如题.
2.代码.
/*
* Copyright (c) 2015, S.F. Express Inc. All rights reserved.
*/
package com.test.test.test.send;
import java.io.IOException;
import java.io.InputStream
Jquery性能优化
r361251
JavaScriptjquery
一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:
$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的
二、请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:
. 代码如下:
var page
在eclipse项目中使用maven管理依赖
tjj006
eclipsemaven
概览:
如何导入maven项目至eclipse中
建立自有Maven Java类库服务器
建立符合maven代码库标准的自定义类库
Maven在管理Java类库方面有巨大的优势,像白衣所说就是非常“环保”。
我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下,然后全部添加到ide的构建路径中,如果用了SVN/CVS,这样会很容易就 把
中国天气网省市级联页面
x125858805
级联
1、页面及级联js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l
按字母分类:
ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
首页 -
关于我们 -
站内搜索 -
Sitemap -
侵权投诉
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.