`
blueyanghualong
  • 浏览: 225373 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

EXTJs截取字符串rowWidth : row所占的大概宽度(使用时按中文占两个字符来度量界面布局所需的宽度)

J# 
阅读更多

convertSuitableString : function(labelText, rowWidth) {
var text = '';
var regChinese = /[\u4e00-\u9fa5]/;
var regUpCharacter = /[A-Z]/;
var regLowCharacter = /[a-z]/;
var regUnderLine = /[_]/;
var regModdleLine = /[-]/;
var regNumber = /[0-9]/;
var oneLinePix = 0;
var brstring = '<br>';
var inText = labelText.toString();
for (var i = 0; i < inText.length; i++) {
var current = inText.charAt(i);
if (oneLinePix >= rowWidth) {
text += '<br>';
oneLinePix = 0;
}
if (current == ' ') {
text += ' ';
oneLinePix += 1;
} else if (regChinese.test(current)) {
text += current;
oneLinePix += 2;
} else if (regUpCharacter.test(current)) {
text += current;
if (current == 'W') {
oneLinePix += 2;
} else if (current == 'J') {
oneLinePix += 1;
} else if (current == 'I') {
oneLinePix += 0.7;
} else {
oneLinePix += 1.5;
}
} else if (regLowCharacter.test(current)) {
text += current;
if (current == 'w') {
oneLinePix += 1.8;
} else if (current == 'i' || current == 'j' || current == 'l') {
oneLinePix += 0.5;
} else {
oneLinePix += 0.9;
}
} else if (regUnderLine.test(current)) {
text += current;
oneLinePix += 1.5;
} else if (regModdleLine.test(current)) {
text += current;
oneLinePix += 0.5;
} else if (regNumber.test(current)) {
text += current;
oneLinePix += 1.2;
} else {
text += current;
oneLinePix += 1.5;
}
}
return text.toString();
},
分享到:
评论

相关推荐

    extjs表单验证特殊字符

    综上所述,EXTJS提供了多种方式来处理表单验证,特别是对特殊字符的限制。通过组合使用内置验证类型、自定义验证函数和正则表达式,开发者可以构建出满足各种复杂需求的表单验证机制。在实际开发中,根据项目需求...

    Extjs fieldset两行两列布局

    该下拉框用于选择项目名称和代码值,数据源为一个简单的存储对象(`SimpleStore`),其中包含两个选项(空字符串和数值1/0)。下拉框的一些关键属性如下: - `triggerAction:'all'`:表示用户可以在下拉列表中输入...

    Extjs 之主界面布局

    Extjs 之主界面简单布局,适合刚刚接触ext的新手学习,就一个html页面。 现在拿来分享。

    extjs界面生成器extjs界面生成器extjs界面生成器

    extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器

    无废话ExtJs 教程十[下拉列表:Combobox]

    - Combobox由两个主要部分组成:文本输入框和下拉列表。用户可以在输入框中键入文字,或者点击下拉箭头展示列表进行选择。 - 创建Combobox需要创建一个`Ext.form.field.ComboBox`实例,并设置必要的配置项。 2. *...

    extjs日期显示(如何转换日期格式)

    在 extjs 中,可以使用 Jackson 依赖项来将后台传递来的日期格式数据转换为 JSON 字符串。Jackson 依赖项提供了多种日期格式转换的方法,例如、@JsonFormat 注解可以用来指定日期格式。 例如,可以使用以下代码来将...

    jQuery EasyUI仿Extjs界面

    1. **布局管理**:EasyUI 提供了多种布局方式,如流式布局、网格布局、边界布局、表格布局等,这使得开发者可以方便地模拟出ExtJS中的复杂界面布局,如左右分栏布局,左侧手风琴折叠菜单,右侧内容区域。 2. **手...

    Extjs学习笔记之七 布局

    锚点布局的anchor属性接受一个字符串,包含两个值,分别是水平锚点值和垂直锚点值。可以设置百分比或相对比例来确定组件与容器边缘的距离。在API文档中,anchor属性的设置解释得很清楚。 以上介绍的只是Extjs布局...

    ExtJS 界面设计器

    这个工具允许开发者通过拖放组件和直观地调整属性来设计用户界面,从而自动生成ExtJS脚本。 1. **ExtJS框架**:ExtJS是Sencha公司开发的一个开源JavaScript库,它提供了大量的预定义组件,如表格、面板、菜单、按钮...

    ExtJS3.2列布局

    在使用ExtJS3.2的列布局时,你需要创建一个容器(如Panel),然后设置其`layout`属性为`column`。接下来,你可以通过添加子组件(items)来定义每列的内容。每个子组件都可以有自己的宽度,通过`width`属性来指定。...

    ExtJS布局之border实例

    本案例详细介绍了如何在ExtJS中利用`border`布局来构建一个多栏结构的应用界面。通过对各个组件的布局设计及交互逻辑的编写,成功实现了根据用户操作动态加载数据的需求。这种方法不仅适用于初学者学习,也适合开发...

    Extjs面板和布局

    ### Extjs面板和布局知识点详解 #### 一、Extjs中的面板(Panel) 在Extjs中,**面板(Panel)**扮演着极其重要的角色,它不仅作为其他组件的容器,而且还是实现页面布局的关键手段之一。面板类似于Delphi、Visual...

    Extjs生成主界面

    本文将详细介绍如何使用Extjs结合Sencha Architect工具来生成一个完整的主界面。 #### 二、准备工作 在开始之前,请确保已经安装了Extjs 4.2.X版本以及Sencha Architect工具。Sencha Architect是一款可视化设计...

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    在这个场景中,我们使用了两种主要布局:`border`布局和`tabpanel`布局。 1. **Border布局**: - Border布局是ExtJs中最复杂的布局之一,允许将容器分为五个区域:北部(north)、南部(south)、东部(east)、...

    ExtJS 4 技术详解,全面解析ExtJS 4

    总结来说,ExtJS 4的Accordion布局和Border布局是两种非常实用的布局模式,它们能够帮助开发者创建出灵活多样的用户界面。Accordion布局适合有限的空间内展示多个面板,而Border布局则适用于需要分割屏幕并进行动态...

    extjs布局全面讲解

    ### ExtJS布局全面讲解 #### 一、Border Layout(方位布局) **定义与特性:** - **定义**:Border布局由类`Ext.layout.BorderLayout`定义,布局名称为`border`,这是一种非常实用且常见的布局方式,适用于创建...

    Extjs4使用要点个人整理

    ExtJS 是一个强大的JavaScript应用程序框架,专用于构建富客户端Web应用。ExtJS 4是其一个重要的版本,引入了许多新特性、改进和优化。以下是我根据提供的文件名整理的关于ExtJS 4的关键知识点: 1. **控件属性**:...

    ExtJS文字按钮列

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用。它提供了丰富的组件模型,包括表格、窗体、菜单、工具栏等,帮助开发者创建功能强大的交互式用户界面。在ExtJS中,"按钮列"...

    Extjs主界面生成导航

    在视图中,我们使用了BorderLayout布局,并在north和west区域中添加了两个Panel组件。 7. Tree Panel 配置:在树状面板中,我们需要配置树状结构的显示方式。在这里,我们使用了Tree Panel的默认配置,并将其显示在...

Global site tag (gtag.js) - Google Analytics