草庐IT

HTML 表单到 ExtJS 表单

codeneng 2023-03-28 原文

HTML Form to ExtJS Form

我有一个 html 表单，其中的字段非常分散。该页面是使用 html 表 - rowspan 和 colspan 组合创建的。

我需要将此表单转换为 ExtJS 并在窗口中显示。

经过一些研究，我觉得表格布局可能是定位字段的最佳选择。但是我一直面临以下几个问题：

  • 如果我将 rowspan 或 colspan 设置为 2 或更多，那么字段的大小也不会增加以占用可用空间并保持在单列中。
  • 如果我调整窗口大小，则表格不会调整大小(不过，表格会随着顶部的 tbar 展开以占据整个空间)。

    • 我将布局用作窗口的"适合"，并将布局用作表单的"表格"。

    我也尝试过对表单使用"锚"布局，然后使用带有表格布局的字段集，但定位不起作用。

    有人可以说明一下吗。以下是我正在使用的基本代码片段：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    var form    =   Ext.create('Ext.form.Panel', {
                                        url:'voyage_berth_monitoring.php',
                                        fieldDefaults: {
                                            labelAlign: 'right'
                                        },
                                        layout:{
                                            type:'table',
                                            columns:3
                                        },
                                        defaults:{
                                            anchor:'100%'
                                        },
                                        tbar:[
                                            {
                                                xtype:'button',
                                                text:'Clear'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Delete'
                                            },
                                            {
                                                xtype:'tbfill'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Save'
                                            },
                                            {
                                                xtype:'button',
                                                text:'Exit'
                                            }
                                        ],
                                        items: [


                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield',
                                                            colspan:2

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    },
                                                    {
                                                            fieldLabel:'item',
                                                            xtype:'textfield'

                                                    }


                                        ]
                                    });



    var win =   Ext.create('Ext.window.Window', {
                                title: 'Window',
                                closable: true,
                                closeAction:'hide',
                                minimizable:true,
                                maximizable:true,
                                height:350,
                                width:750,
                                layout:'fit',
                                autoScroll:true,
                                items: form
                            });

    win.show();

    • 已经看过：http://dev.sencha.com/deploy/ext-4.0.0/examples/form/dynamic??.html 表格 3 会有所帮助。您也可以将顶部渲染到视口：Ext.create('Ext.Viewport', { \tlayout: 'fit', \titems: [top], \trenderTo: Ext.getBody() \t});
    • 感谢您的帮助 Xupypr。我试过了，但是这种结构也不允许像 html 的 table 标记那样具有灵活性，我们可以控制页面的每个部分。此外，使用大量容器在页面中进行所需的定位也使其有点复杂。这种灵活性是不是通过extjs的表格布局是不可能的？

    基本上我的布局表也有同样的问题，找不到任何方法将我的显示字段跨越到 td 的长度，并且 2 列字段也有同样的问题。

    我更喜欢的解决方案是扩展表格布局并赋予它灵活性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Ext.define('Extended.TableLayout', {
        alias:'layout.extendedTable',
        extend: 'Ext.layout.container.Table',
        type: 'extendedTable',
        columns: 2,
        rightMargin: 20,
        tableAttrs:{
            width: '100%'
        },
        tdAttrs:{
            width:'50%'
        },
        itemCls:'x-table-cell',
        renderItems: function(items) {

            var totalWidth = this.getLayoutTargetSize().width,
                len = items.length,
                i, item, colNr;

            for (i = 0; i < len; i++) {
                item = items[i];

                    colNr = this.columns;
                if ((colNr > 1) && Ext.isNumber(item.colspan)) {
                    colNr = colNr - item.colspan + 1;
                }
                item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
            }
            this.callParent(arguments);
        }
    });

    使用 extendedTable 布局，我得到了想要的外观

    • 扩展是优秀的 Nscob。谢谢分享。不过，我通过结合使用列和 hbox 布局来达到我的目的。但肯定会接触到您为未来的应用程序创建的内容。

    另一种方法是将您的 HTML 表单数据序列化为 JSON 并将其加载到 EXT 存储中。一旦它在商店里，EXT 会很乐意用它做任何你想做的事情。

    • 感谢 Diodeus，但这样做可能违反了将"视图"部分与应用程序的其余部分分开的规则。

    ExtJSHTMLnbspbrsectionextjsfieldforms

    有关HTML 表单到 ExtJS 表单的更多相关文章

    1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

      我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

    3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

    4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

      所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

    5. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

      我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

    6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

      我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

    8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

      我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

    9. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

      我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

    10. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

      考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

    随机推荐