zoukankan      html  css  js  c++  java
  • Ext Js简单常用对象的创建使用

    在自己的随笔中关于Ext Js的文章是针对Ext Js的3.4.0版的API脚本库。

    1.对于alert和prompt的创建使用

    function TestMsg() {
        //可以比较一下显示效果
        //alert(confirm("是否确认退出?"));
        //Ext.MessageBox.alert("消息", "ExtJs提示框");
        
        Ext.Msg.alert("信息提示", "这样处理是否成功?", function () { alert('TT!') });
        //弹出输入内容的对话框
        Ext.Msg.prompt("AA", "PSPSPSPS", function (btn, text) {
            if (btn == "ok") {
                alert(text);
            }
            else {
                alert("Not:" + text);
            }
        });
    }

    2.对于Ext.MessageBox.show的创建使用

    function TTMsgShow() {
        Ext.MessageBox.show({
            title: '提示',
            msg: '信息内容显示',
             400,
            icon: Ext.MessageBox.QUESTION, //ERROR\INFO\WARNING\QUESTION
            buttons: Ext.MessageBox.YESNOCANCEL,//YESNOCANCEL\OKCANCEL
            animate: true, //是否有动画效果
            multiline: true, //显示输入的多行数据
            //buttons: { "yes": "<h2>yeah!<h2/>", "no": "<h2>oh no!<h2/>", "cancel": "<h2>X<h2/>" },//自定义的buttons显示
            fn: function (btn) {
                switch (btn) {
                    case 'ok': Ext.MessageBox.alert('信息提示', '你点的是'+btn+'按钮'); break;
                    case 'cancel': Ext.MessageBox.alert('信息提示', '你点的是Cancel按钮'); break;
                    case 'yes': Ext.MessageBox.alert('信息提示', '你点的是YES按钮'); break;
                    case 'no': Ext.MessageBox.alert('信息提示', '你点的是No按钮'); break;
                    default:Ext.MessageBox.alert('信息提示', '你点的是'+btn+'按钮'); break;
                }
            }
        });
    }

    3.对于ToolTip的创建使用

    //简单ToolTip一些效果配置
    function toolTipTest() {
        new Ext.ToolTip({
            target: 'divTest', //指向区域 
            title: 'TT',
            closable: true, //是否关闭显示
            autoHide: false, //是否自动隐藏
            draggable: true, //是否随意拖放
            showDelay: 10, //显示延迟,默认500
            trackMouse: true, //鼠标划过,随鼠标移动
            html: '<h1>测试信息学想你想你想你想</h1>'
        }).show();
    }
    //简单ToolTip显示位置配置
    function toolTipTT() {
        new Ext.ToolTip({
            target: 'divTest', //指向区域 
            title: '<a href="#">ToolTip Title<\a>',
            closable: true, //是否关闭显示
            autoHide: false, //是否自动隐藏
            anchor: 'top', //位置为top\buttom\right
            anchorOffset: 50, //位置偏移量
            contentEl: 'tipContent', //一个已存在的HTML元素,或者一个已存在HTML元素的 id 
            html: '<h1>测试信息学想你想你想你想</h1>'
        }).show();
    }

    4.对于Window的创建使用

    //简单window页面
    function getTestWin() {
        var win = new Ext.Window({
            title: "ExtWindow",
             300,
            height: 500,
            renderTo:Ext.getBody(),
            html: '<h1><font>Hello ExtJS!</font></h1>',
            items:
                [
                    new Ext.Button({ text: "通过New Button添加的对象" }),
                    new Ext.Button({ text: "items下添加2个New Button" }),
                    { xtype: "button", text: "通过xtype设置属性新Button" },
                    { xtype: "colorpalette",  150, height: 100 }
                ]
        });
        win.show();
    }

    5.对于FormPanel的创建使用(对于表单一些常用对象的创建也在里面了)

    //创建表单
    function createForm() {
        //初始化单例。任何基于标签的快速提示开始工作。
        Ext.QuickTips.init(); //初始化所有quickTips的所有提示信息
    
        var fromTest = new Ext.FormPanel({
            layout: 'form', autoHeight: true, frame: true, renderTo: Ext.getBody(),  300, height: 500, //frame是否渲染表单
            title: '<center bgcolor="Yellow" onclick="window.location.reload()">表单练习</center>',
            style: 'margin-left:auto,margin-top:50px,500px,background-color: Yellow',
            labelAlign: 'left', labelWidth: 80, buttonAlign: 'center', defaults: {  180 }, //标签对齐方式、标签宽度、元素对齐、默认属性
            items: [
                        { xtype: 'textfield', fieldLabel: '文本框控件', id: 'txtContent', name: 'TextBox' },
                        { xtype: 'textfield', fieldLabel: '文本框', id: 'txt', readOnly: true, emptyText: '请输入内容' }, //allowDecimals:允许小数;allowNegative:允许负数
                        {xtype: 'numberfield', fieldLabel: '输入数字', id: 'txtNum', allowDecimals: false, allowNegative: false, maxValue: 1000, minValue: 0 },
                        { xtype: 'combo', fieldLabel: '下拉框控件', id: 'combTest', mode: 'local', displayField: 'Name', valueField: 'Id', editable: false,
                            typeAhead: true, forceSelection: false, triggerAction: 'all', selectOnFocus: true, //forceSelection:必选一项;triggerAction:匹配所有
                            store: new Ext.data.SimpleStore({ fields: ['Id', 'Name'], data: [['1', '李白'], ['2', '李杜'], ['3', '李丽']] })
                        },
                        { xtype: 'datefield', fieldLabel: '日历控件', id: 'dateTest', format: 'Y-m-d', editable: false, value: new Date().format('Y-m-d') }, //默认日期
                        {xtype: 'radiogroup', fieldLabel: '单选按钮', id: 'rabs', name: 'Radios',  100,
                        items: [
                        { name: 'Radios', boxLabel: '嫁人', inputValue: '1', checked: true },
                        { name: 'Radios', boxLabel: '娶人', inputValue: '0' }
                        ]
                    },
                    { xtype: 'checkboxgroup', fieldLabel: '复选控件', columns: 2,//复选框组
                        items: [
                        { boxLabel: '香蕉', inputValue: 'A', id: 'chekA' },
                        { boxLabel: '苹果', inputValue: 'B', id: 'checkB' },
                        { boxLabel: '橘子', inputValue: 'C', id: 'checkC' },
                        { boxLabel: '桃子', inputValue: 'D', id: 'checkD' }
                        ]
                    },
                    { xtype: 'timefield', fieldLabel: '时间控件', format: 'H:i', increment: 60, value: new Date().toLocaleTimeString() },
                    { xtype: 'fieldset', fieldLabel: '标签页', autoHeight: true,//标签页
                        items: [{ xtype: 'panel', title: '标签1', frame: true, height: 50 }, { xtype: 'panel', title: '标签2', frame: true, height: 30}]
                    },
                    { xtype: 'htmleditor', fieldLabel: '在线编辑器',  200, height: 100 }//在线编辑器
                    ],
            buttons: [
                    { text: '保存', tooltip: '这是保存按钮', handler: function () { Msg('保存成功') } },//tooltip提示信息
                    { text: '取消', tooltip: '这是取消按钮', handler: function () { form1.form.reset(); } }
                    ]
        });
    }

    6.对于Panel的创建使用

    function createPanel() {
        var objPro = { title: "Hello Pannel",  300, height: 300, html: '<h1>Hello Pannel Source!</h1>' };
        var panel = new Ext.Panel(objPro);
        panel.render("Hello Pannel"); //将面板渲染到Hello Pannel处,为Div的id
        //此处的render方法后面的参数表示页面上的div元素id,也可以直接通过属性renderTo参数来替换render方法,也可以renderTo:Ext.getBody()
        //例如:new Ext.Panel({renderTo:"hello",title:"Hello Panel",300,height:300,html:'<h1>Hello Panel Source!</h1>'});
    
        //对于一个容器控件(组件),支持延迟方式创建子控件,在父控件的items属性来传递数组方式构建
        //例如:var tabPanel=new Ext.TabPanel({200,height:300;items:[
        //{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}
        //]});    
        //等价于:var tabPanel=new Ext.TabPanel({200,height:300,items[
        //new Ext.Panel({title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30},new Ext.Panel({title:"面板3",height:30}))
        //]});
        //相比而言,前者较好,前者是在初始化时创建的;后者是一开始就创建,前者实现了延迟加载
    }

    7.API文档中对于“xtype”的介绍

    以下是所有的'xtype'和类的对应关系 
    xtype            Class
    -------------    ------------------
    box              Ext.BoxComponent
    button           Ext.Button
    buttongroup      Ext.ButtonGroup
    colorpalette     Ext.ColorPalette
    component        Ext.Component
    container        Ext.Container
    cycle            Ext.CycleButton
    dataview         Ext.DataView
    datepicker       Ext.DatePicker
    editor           Ext.Editor
    editorgrid       Ext.grid.EditorGridPanel
    flash            Ext.FlashComponent
    grid             Ext.grid.GridPanel
    listview         Ext.ListView
    panel            Ext.Panel
    progress         Ext.ProgressBar
    propertygrid     Ext.grid.PropertyGrid
    slider           Ext.Slider
    spacer           Ext.Spacer
    splitbutton      Ext.SplitButton
    tabpanel         Ext.TabPanel
    treepanel        Ext.tree.TreePanel
    viewport         Ext.ViewPort
    window           Ext.Window
    
    Toolbar components
    ---------------------------------------
    paging           Ext.PagingToolbar
    toolbar          Ext.Toolbar
    tbbutton         Ext.Toolbar.Button        (过时的;使用 button)
    tbfill           Ext.Toolbar.Fill
    tbitem           Ext.Toolbar.Item
    tbseparator      Ext.Toolbar.Separator
    tbspacer         Ext.Toolbar.Spacer
    tbsplit          Ext.Toolbar.SplitButton   (过时的;使用 splitbutton)
    tbtext           Ext.Toolbar.TextItem
    
    Menu components
    ---------------------------------------
    menu             Ext.menu.Menu
    colormenu        Ext.menu.ColorMenu
    datemenu         Ext.menu.DateMenu
    menubaseitem     Ext.menu.BaseItem
    menucheckitem    Ext.menu.CheckItem
    menuitem         Ext.menu.Item
    menuseparator    Ext.menu.Separator
    menutextitem     Ext.menu.TextItem
    
    Form components
    ---------------------------------------
    form             Ext.form.FormPanel
    checkbox         Ext.form.Checkbox
    checkboxgroup    Ext.form.CheckboxGroup
    combo            Ext.form.ComboBox
    datefield        Ext.form.DateField
    displayfield     Ext.form.DisplayField
    field            Ext.form.Field
    fieldset         Ext.form.FieldSet
    hidden           Ext.form.Hidden
    htmleditor       Ext.form.HtmlEditor
    label            Ext.form.Label
    numberfield      Ext.form.NumberField
    radio            Ext.form.Radio
    radiogroup       Ext.form.RadioGroup
    textarea         Ext.form.TextArea
    textfield        Ext.form.TextField
    timefield        Ext.form.TimeField
    trigger          Ext.form.TriggerField
    
    Chart components
    ---------------------------------------
    chart            Ext.chart.Chart
    barchart         Ext.chart.BarChart
    cartesianchart   Ext.chart.CartesianChart
    columnchart      Ext.chart.ColumnChart
    linechart        Ext.chart.LineChart
    piechart         Ext.chart.PieChart
    
    Store xtypes
    ---------------------------------------
    arraystore       Ext.data.ArrayStore
    directstore      Ext.data.DirectStore
    groupingstore    Ext.data.GroupingStore
    jsonstore        Ext.data.JsonStore
    simplestore      Ext.data.SimpleStore      (过时的;使用 arraystore)
    store            Ext.data.Store
    xmlstore         Ext.data.XmlStore

    是不是应该加上一些截图看看效果呢?自己不太喜欢写很长的文章尽量缩减,因为太长的话,大家都会没有耐心看下去的,虽这样不是很好,但也考虑一些大家感受。想想如果把代码注释的足够详细,那么将更容易让人理解了。只有效果截图,而没有代码注释,这样的代码就相当于不写,可读性不好,别人不明白你写的是什么,良好的注释还是有必要的。

  • 相关阅读:
    上班不再能上msn了
    小龟不用冬眠了
    Sonne学摄影(3)上海汽车展汽车
    新年提醒银行卡的用户注意了
    转贴:49届世乒赛海外名将介绍究竟谁会对中国队构成威胁??
    用两个词形容现在的生活:忙碌,充实
    终于加入胖友一族
    上海人
    相互残杀
    王励勤,好样的!看49届世乒赛男单决赛
  • 原文地址:https://www.cnblogs.com/SanMaoSpace/p/2873787.html
Copyright © 2011-2022 走看看