EXT.NET常用属性

最新推荐文章于 2022-07-18 08:00:19 发布

weixin_33994444

最新推荐文章于 2022-07-18 08:00:19 发布

阅读量869

点赞数

文章标签： javascript ui 测试 ViewUI

原文链接：http://www.cnblogs.com/DJYBlog/p/3978545.html

版权

Ext_数字输入框_Ext.form.NumberField:

<mce:script type="text/javascript"></mce:script>

Ext_多行文本输入框_Ext.form.TextArea

<mce:script type="text/javascript"><!--

/*
Ext.form.TextArea独有配置表:
preventScrollbars           Boolean           文本溢出是否显示滚动条，true隐藏滚动条(默认false)
*/

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';

    //Ext.QuickTips.init();

    var config = {
        title:'Ext.form.TextArea示例',
        labelSeparator:':',
        labelWidth:60,
        bodyStyle:'padding:5 5 5 5',
        frame:true,
        height:150,
        width:250,
        renderTo:'form',
        items:[
            new Ext.form.TextArea({
                id:'memo',
                widht:150,
                fieldLabel:'备注'
            })
        ],
        buttons:[
            {text:'确定',handler:showValue}
        ]
    }

    var form = new Ext.form.FormPanel(config);

    //单击按钮后事件处理
    function showValue()
    {
        var memo = form.findById('memo');       //取得输入框控件

        var config = {
            title:'TextArea值是:',
            msg:memo.getValue(),                //取得控件值
            width:200
        }

        Ext.Msg.show(config);
    }
});
// --></mce:script>

Ext_基本文本输入框_Ext.form.TextField

<mce:script type="text/javascript"><!--

/*
Ext.form.TextField主要配置表:
allowBlank                 Boolean             是否允许为空(默认true)
blankText                  String              为空验证失败提示信息
emptyText                  String              空字段中默认显示信息
grow                       Boolean             设置字段是否根据内容伸缩(默认false)
growMax                    Number              字段伸展的最大宽度(默认800)
growMin                    Number              字段收缩最小宽度(默认30)
inputType                  String              字段类型(默认text)
maxLength                  Number              字段允许输入最大长度
masLengthText              String              最大长度验证失败提示信息
minLength                  Number              字段允许输入最小长度
minLenghtText              String              最小长度验证失败提示信息
regex                      String              javascript正则表达式
regexText                  String              正则表达式验证失败提示信息
selectOnFocus              Boolean             设置当前字段得到焦点是否自动选择已存在文本(默认false)
vtype                      String              验证类型名字
vtypeText                  String              自定义提示信息，代替vtype本身的错误提示信息
validator                  Function            在所有基本验证通过后调用(默认null)
*/

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
    //初始化信息提示功能
    Ext.QuickTips.init();
    //统一指定错误信息提示浮动显示方式
    Ext.form.Field.prototype.msgTarget = 'side';

    var config = {
        title:'Ext.form.TextField例',                    //表单标题
        labelSeparator:':',                              //表单label与其他元素分割符
        labelWidth:60,                                   //标签宽
        labelAlign:'right',                              //标签对齐方式
        bodyStyle:'padding:5 5 5 5',                     //表单边距
        frame:true,                                     //是否渲染表单
        height:120,                                      //表单高
        width:250,                                       //表单宽
        renderTo:'form',                                 //表单定位
        //表单子元素数组
        items:[
            new Ext.form.TextField({
                fieldLabel:'用户名',
                id:'userName',
                selectOnFocus:true,                     //得到焦点自动选择文本
                allowBlank:false,                       //不允许为空
                blankText:'用户名不可为空',              //空验证失败错误提示信息
                //javascript邮件验证正则表达式
                regex:/^([/w]+)(.[/w]+)*@([/w-]+/.){1,5}([A-Za-z]){2,4}$/,
                regexText:'用户格式错误'                 //javascript正则表达式验证失败错误信息提示
            }),
            new Ext.form.TextField({
                fieldLabel:'密码',
                inputType:'password',                    //设置输入类型为password
                allowBlank:false,
                blankText:'密码不可为空'
            })
        ]
    }

    var form = new Ext.form.FormPanel(config);
});
// --></mce:script>

Ext_Ext.form.Field基类

<mce:script type="text/javascript"><!--

/*
其他表单字段都从Ext.form.Field类中扩展

Ext.form.Field主要配置项表:
name              String              字段名(数据提交后台的名称)
id                String              控件唯一表示(系统会自动生成)
value             String              字段初始化值
readOnly          Boolean             是否只读
validateOnBlur    Boolean             字段失去焦点时是否被验证(默认true)
validationDelay   Number              验证延时(默认250毫秒)
disabled          Boolean             字段是否不可用‘
fieldLabel        String              字段对应标签说明(默认'')
hideLabel         Boolean             是否隐藏字段标签(默认false)
hideMode          String              值:visibility,offsets,display
hideParent        Boolean             true显示隐藏组件同时显示隐藏其容器(默认false)
labelSeparator    String              字段标签于字段间分隔符(默认':')
msgTarget         String              设置错误信息显示位置：qtip:显示浮动提示信息
                                                            title:显示一浏览器浮动提示信息
                                                            under:在字段下方显示一提示信息
                                                            side:在字段右边显示一提示信息
*/

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';

    Ext.QuickTips.init();           //初始化信息提示功能

    var config = {
        title:'信息提示(qtip)',           //表单标题
        height:100,                       //表单高度
        width:300,                        //表单宽度
        frame:true,                      //是否渲染表单
        labelSeparator:':',              //分隔符
        labelWidth:60,                   //标签宽
        labelAlign:'right',              //标签对齐方式
        renderTo:'form',                 //表单定位
        //表单子元素数组
        items:[
            //单行文本框
            new Ext.form.TextField({
                fieldLabel:'姓名',          //标签内容
                allowBlank:false,          //是否允许空
                blankText:'请输入姓名',     //为空之后的错误信息提示
                msgTarget:'qtip'            //显示浮动信息提示框
                //msgTarget:'title'
                //msgTarget:'under'      //注意表单高度！
                //msgTarget:'side'       //注意表单宽度！
            }),
            //数字框
            new Ext.form.NumberField({
                fieldLabel:'年龄',
                allowBlank:false,
                blankText:'请输入年龄',
                msgTarget:'qtip'
            })
        ]
    }

    var form = new Ext.form.FormPanel(config);
});
// --></mce:script>

Ext_表单相关动作_Ext.form.Action

Ext.form.Action提供表单相关动作，只在表单执行submit,load时创建
或通过设置该类的method可执行不同动作

Ext.form.Action配置表:
failure            Function           设置错误处理函数
method             String             请求服务器的方式
params             Mixed              附加参数，附加到Ext.form.BasicForm.baseParams中，同表单字段一同提交指定URL
sucess             Function           设置请求成功后回调函数
url                String             当前动作请求url
waitMsg            String             当前动作执行调用Ext.Msg.wait组建显示的等待信息
waitTitle          String             调用Ext.Msg.wait显示的标题

Ext.form.Action.Submit
提交表单数据并处理返回结果(只在表单创提交时创建)
返回信息示例:
{
    success:false,       //必备，表示表单提交成功否
    error:{              //可选,错误信息
        ...
    }
}
Ext.form.Action.Submit配置表:
clientValidation          boolean               是否进行客户端验证(默认true)

Ext.form.Action.Load
读取服务器数据到表单(只在表单创提交时创建)
返回信息示例:
{
    success:true,        //表示表单加载数据是否成功
    data:{               //表单数据
        ...
    }
}
*/

Ext_表单面板_Ext.form.FormPanel

Ext.form.BasicForm基本表单组件，提供对表单动作的支持并负责初始化已有字段组件
默认采用Ajax方式进行异步数据提交，
如要用原始方法提交表单可覆盖表单的onSubmit及Submit方法

######################################################################################
var myForm = new Ext.form.BasicForm("form-el-id",{
    onSubmit:Ext.emptyFn,               //覆盖onSubmit方法为空函数
    submit:function()                   //覆盖submit方法
    {
        this.getEl().dom.submit();      //调用底层表单元素的submit方法进行表单提交
    }
});
######################################################################################

Ext.form.BasicForm主要配置表
baseParams             Object               传递到请求中的参数，如{id;'123',foo:'bar'}
errorReader            DataReader           表单提交时用来读取错误信息的数据读取器
fileUpload             Boolean              设置表单是否进行文件上传
method                 String               设置表单提交方式GET或POST
reader                 DataReader           设置表单执行load读取数据时的数据读取器
timeout                Number               设置表单动作的超时时间
trackResetOnLoad       Boolean              设置true表单在初次创建将清除最近一次加载的数据或用setValues()设置数据
url                    String               设置表单执行请求时默认提交路径
waitMsgTarget          Mixed                默认情况下，表单执行中显示的是以Ext.MessageBox.wait组件，可指定其他目标元素

Ext.form.BasicForm常用方法(继承到FormPanel中，可直接使用)
clearInvalid():BasicForm                    清除表单中所有无效验证信息
doAction(String/Object actionName,          执行一个预定动作(Ext.form.Action.Submit或Ext.form.Action.Load)或自定义扩
[Object options]):BasicForm                 Ext.form.Action动作，执行一个特殊请求处理
findField(String id):Field                  通过id,dataIndex,name,hiddenName查找表单字段
isDirty():Boolean                           如表单在第一次读取后被更改过返回true
isValid():Boolean                           如果客户端验证成功返回true
load(Object options):BasicForm              执行表单读取动作，配置对象options被传递到action中
loadRecord(Record record):BasicForm         从一个数据记录中读取数据到表单中
markInvalid(Array/Object errors):BasicForm  成批设置表单字段为验证无效，参数可为数组[{id;'2',msg:'me'},...],JSON对象
reset():BasicForm                           重置表单
setValues(Array/Object values):BasicForm    成批设置表单字段值[{id:'name',value:'tom'},...]
submit(Object options):BasicForm            执行表单提交动作，配置对象options被传递到action中
updateRecord(Record record):BasicForm       持久化表单数据到记录集中

Ext.form.FormPanel支持的主要表单组件
Ext.form.Checkbox                  复选框
Ext.form.ComboBox                  下拉列表框
Ext.form.DateField                 日期选择框
Ext.form.Hidden                    隐藏域
Ext.form.HtmlEditor                HTML文本编辑器
Ext.form.NumberField               数字输入框
Ext.form.Radio                     单选框
Ext.form.TextArea                  多行文本框
Ext.form.TextField                 单行文本框
Ext.form.TimeField                 时间选择框
Ext.form.TriggerField              触发按钮文本框

Ext.form.FormPanel主要配置项目表
buttons            Array               按钮对象配置数组
buttonAlign        String              设置buttons中按钮对齐方式:left,center(默认),right
footer             Boolean             是否创建表单页脚
header             Boolean             是否创建表单标题栏，如设置title自动创建
headerAsText       Boolean             标题栏中是否显示title默认true
items              Mixed               一子元素或子元素数组
labelAlign         String              表单标签对齐方式：left(默认),top,right
labelWidth         Number              表单标签宽度
title              String              表单标题

Ext.form.FormPanel常用方法表
getForm():Ext.form.BasicForm              获取表单面板基本表单对象
load(Object options):void                 加载表单内容，为Ext.form.BasicForm.load代理
starMonitoring():void                     开始监控表单有效状态
stopMonitoring():void                     停止监控表单有效状态
*/

Ext_基本表单_Ext.form.BasicForm

Ext_菜单组件_Ext.menu.Menu

Ext.menu.Menu主要配置项表:
items          Mixed                   有效的菜单项数组
shadow         Boolean/String          阴影显示方式，默认true(sides方式)，sides,frame,drop

菜单项主要类型表:
Ext.menu.TextItem            文本元素
Ext.menu.Separator           菜单分隔符
Ext.menu.CheckItem           包含选择框的菜单项

菜单组件常用方法表:
addElement()          Mixed el                添加Element元素
addItem()             Ext.menu.Item item      添加一个已存在的菜单项
addMenuItem()         Object config           根据菜单项配置对象，添加菜单项
addSeparator()                                添加菜单分隔符
addText()             String text             添加一字符串
*/

Tree:1、Ext.tree.TreePanel

      主要配置项：
            root：树的根节点。
            rootVisible：是否显示根节点，默认为true。
            useArrows：是否在树中使用Vista样式箭头，默认为false。
            lines：是否显示树线，默认为true。
            loader：树节点的加载器，默认为Ext.tree.TreeLoader。
            selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。
            pathSeparator：树节点路径的分隔符，默认为“/”。
            singleExpand：是否一次只展开树中的一个节点，默认为true。
            requestMethod：请求方法，可选值有POST、GET。
            containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

      主要方法：
            collapseAll()：收缩所有树节点
            expandAll()：展开所有树节点
            getRootNode()：获取根节点
            getNodeById(String id)：获取指定id的节点
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
            expandPath( String path, [String attr], [Function callback] )
            getChecked( [String attribute], [TreeNode startNode] )
            selectPath( String path, [String attr], [Function callback] )
            getSelectionModel()：

2、Ext.data.Node
      主要配置项：
            id：节点id
            leaf：当前节点是否为叶子节点

      主要属性：
            id：节点id
            attributes：节点属性的集合
            parentNode：当前节点的父节点
            childNodes：当前节点所有子节点组成的数组
            firstChild：当前节点的第一个直接子节点，如果没有则为null值
            lastChild：当前节点的最后一个直接子节点，如果没有则为null值
            nextSibling：当前节点的下一个兄弟节点，如果没有则为null值
            previousSibling：当前节点的前一个兄弟节点，如果没有则为null值

      主要方法：
            appendChild( Node/Array node )：追加新的子节点
            bubble( Function fn, [Object scope], [Array args] )：从当前节点开始向上迭代调用指定函数，如果指定函数返回false则将终止迭代。
                  args：传入函数中的参数，默认为当前节点
            cascade( Function fn, [Object scope], [Array args] )：从当前节点开始向下迭代调用指定函数，如果指定函数返回false则将终止迭代。
            contains( Node node )：当前节点是否包含指定子节点。
            eachChild( Function fn, [Object scope], [Array args] )：迭代当前节点的所有子节点调用指定函数，如果指定函数返回false则将终止迭代。
            findChild( String attribute, Mixed value )：查找具有指定属性的第一个子节点。
            findChildBy( Function fn, [Object scope] )：根据自定义函数查找第一个符合要求的子节点，如果自定义函数返回true则说明匹配成功。
            getDepth()：取得当前节点的深度，根节点的深度为0
            getOwnerTree()：取得当前节点所在树。
            getPath( [String attr] )：取得当前节点对应的路径，这个路径在程序中可用于展开或者选择节点。
                   attr：用于查找路径的属性，默认为节点id
            hasChildNodes()：是否有子节点
            indexOf( Node node )：取得指定子节点的索引值，未找到返回-1。
            insertBefore( Node node, Node refNode )：在当前节点的指定子节点之前插入一个新的子节点。
                  node：要插入的新节点
            isAncestor( Node node )：判断指定节点是否为当前节点的父节点（可以是任何一级中的父节点）。
            isFirst()：是否为父节点的第一个子节点。
            isLast()：是否为父节点的最后一个子节点。
            isLeaf()：是否为叶子节点。
            item( Number index )：取得指定索引的子节点。
            remove()：从父节点中删除当前节点。
            removeChild( Node node )：删除当前节点的指定子节点。
            replaceChild( Node newChild, Node oldChild )：用新的子节点替换当前节点的指定子节点。
            sort( Function fn, [Object scope] )：用指定的排序函数为当前节点的子节点进行排序。

3、Ext.tree.TreeNode
      主要配置项：
            text：节点上的文本信息
            qtip：节点上的提示信息
            icon：节点图标对应的路径
            iconCls：应用到节点图标上的样式
            checked：当前节点的选择状态
                  true：在节点前显示一个选中状态的复选框
                  false：在节点前显示一个未选中状态的复选框
                  不指定该值：不显示任何复选框
            href：节点的连接属性，默认为#
            hrefTarget：显示节点连接的目标框架
            editable：是否允许编辑，默认为true
            expanded：是否展开节点，默认为false
            disabled：是否禁用节点，默认为false
            singleClickExpand：是否通过单击方式展开节点
            allowChildren：是否允许当前节点具有子节点，默认为true
            expandable：当不含子节点时，是否总显示一个加减图标，默认为false
            uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI

      主要属性：
            text：节点上的文本信息
            disabled：当前节点是否被禁用

      主要方法：
            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点
            deep：是否级联收缩全部子节点
            collapseChildNodes( [Boolean deep] )：收缩所有子节点
            disable()：禁用当前节点
            enable()：启用当前节点
            ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点
            expandChildNodes( [Boolean deep] )：展开所有子节点
            isExpanded()：当前节点是否展开
            isSelected()：当前节点是否被选中
            select()：选择当前节点
            setText( String text )：设置当前的文本
            toggle()：切换当前节点的展开和收缩状态
            unselect()：取消对当前节点的选择
            getUI()：取得节点的UI对象

4、Ext.tree.AsyncTreeNode
      主要配置项：
            loader：当前节点的树加载器，默认使用树中配置的树加载器

      主要方法：
            isLoaded()：当前节点是否已经加载数据
            reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数

5、Ext.tree.TreeNodeUI
      主要方法：
            getAnchor()：从节点的UI中获取焦点的<a>元素
            getIconEl()：获取图标的<img>元素
            getTextEl()：获取文本节点
            addClass( String/Array className )：
            removeClass( String/Array className )：
            hide()：
            show()：
            isChecked()：取得节点的选择状态，如果当前节点没有复选框则函数返回false
            toggleCheck( Boolean (optional) )：设置节点复选框的选择状态

6、Ext.tree.RootTreeNodeUI

7、Ext.tree.DefaultSelectionModel
      是TreePanel的默认选择模式，该模式一次只能选择树中的一个节点。

      主要方法：
            clearSelections()：清除对树中所有节点的选择
            getSelectedNode()：取得当前被选中的节点
            isSelected( TreeNode node )：节点是否被选中
            select( TreeNode node )：选中指定节点
            unselect( TreeNode node )：取消指定节点的选中状态
            selectNext()：选择当前被选节点的下一个节点
            selectPrevious()：选择当前被选节点的上一个节点

8、Ext.tree.MultiSelectionModel
      是TreePanel的多选择模式，该模式一次可以选择树中的多个节点。

      主要方法：
            clearSelections()：清除所有节点的选中状态
            getSelectedNodes()：取得被选节点组成的数组
            isSelected( TreeNode node )：节点是否被选中
            select( TreeNode node, [EventObject e], Boolean keepExisting )：选中指定节点
            unselect( TreeNode node )：取消指定节点的选中状态

9、Ext.tree.TreeLoader
      提供了对子节点的延时加载功能，请求指定的URL地址，返回子节点数据，返回的数据格式如下：
Js代码
[
    {
        id: 1,
        text: "node1",
        leaf: true,
        check: false
    },
    {
        id: 2,
        text: "node2",
        children: [
            {
                id: 3,
                text: "node3",
                leaf: true
            }
        ]
    }
]
[
    {
        id: 1,
        text: "node1",
        leaf: true,
        check: false
    },
    {
        id: 2,
        text: "node2",
        children: [
            {
                id: 3,
                text: "node3",
                leaf: true
            }
        ]
    }
]
      树节点展开时，当前节点的id会作为请求参数被发送到服务器，在服务器可以通过node参数名进行获取。

      主要配置项：
            dataUrl：获取子节点的URL地址。
            baseAttrs：子节点的基本属性对象，该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
            baseParams：基本的请求参数，这些参数会被附加到每一个节点的请求中。
            clearOnLoad：在加载前是否移除已存在的子节点，默认为true。
            preloadChildren：在第一次加载子节点后是否递归加载所有子节点。
            requestMethod：请求方法，可选值有POST、GET。
            uiProviders：加载器创建子节点的UI实现类。
            url：与dataUrl作用相同。

      主要方法：
            load( Ext.tree.TreeNode node, Function callback, (Object) scope )：从指定的URL加载树节点。
            node：需要加载子节点的树节点。

10、Ext.tree.TreeEditor
      主要配置项：
            alignment：对齐方式。
            editDelay：两次点击节点触发编辑操作的延时时间，默认为350毫秒。
            hideEl：在显示编辑器组件时是否隐藏绑定元素。
            maxWidth：编辑器的最大宽度，默认为250。

11、Ext.tree.TreeSorter
      主要配置项：
            property：用于排序的节点属性名，默认为text。
            dir：排序方向，可选值有asc、desc，默认为asc。
            caseSensitive：是否区分大小写，默认为false。
            folderSort：叶节点是否排在非叶节点之下，默认为false。
            leafAttr：叶子节点在folder排序时的值，默认为leaf。
            sortType：一个自定义函数用于在排序前转换节点值。

1.如果对gridpanel要多获取选中记录的操作，操作在服务端，如果采用RowSelectionModel sm = skcs_Grid.SelectionModel.Primary as RowSelectionModel;

这种形式，请注意，将gridpanel的SelectionMemory设置为"Disabled"，否则将会重复提交记录，该开关可以在会回发后保持选中状态

2.Ext.net TreePanle 如何刷新呢？例如TreePlanle的ID为T1，不是T1.reload(),而是T1.root.reload();

3.ext:FileUploadField 浏览按钮不显示

这是bug，解决方案为：添加css

查看文本打印 ?

<style type="text/css">
.ext-ie .button-fix table.x-btn,
.ext-gecko .button-fix table.x-btn{
top:0px;
}
.ext-ie .button-fix .x-form-text,
.ext-gecko .button-fix .x-form-text{
margin-top:1px;
}
</style>

查看文本打印 ?

<ext:FileUploadField ID="UpFile" runat="server" ButtonText="浏览" AllowBlank="false" EmptyText="请选择文件" Width="200" CtCls="button-fix" Icon="LinkAdd

4.清空GridPanel的checkbox选中行，GridPanel.getSelectionModel().clearSelections();可以清空选中状态

5.Ext.net1.1目前暂不支持MVC3.0的Razor引擎模式

转载于:https://www.cnblogs.com/DJYBlog/p/3978545.html

weixin_33994444

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EXT.NET常用属性

Ext_数字输入框_Ext.form.NumberField:<mce:scripttype="text/javascript"><!--/*Ext.form.NumberField独有配置表:allowDecimalsBoolean是否允许输入小数(默认true)allowNegative...
复制链接

扫一扫