• Ext.NET Combobox实现数据源静态配置


    背景

    • 项目中使用增值税税率, 需求原本是统一的指定税率, 譬如3% 5% 等固定的. 随着业务增加, 发现不同业务有不同的税率, 一会加一个, 一下要改很多个界面. 就想着放到统一的地方.

    技术背景

    • 界面主要使用 Ext.NET方式构建, 引用js文件方式.

    代码实现

    /// 定义一个Combobox 待会要使用的静态数据源 base.js
    var VTaxRatioCMB = Ext.create('Ext.data.Store', {
        id: 'VTaxRatioCMB',
        fields: ['value', 'name'],
        data : [
            {"value":0, "name":"0"},
            {"value":0.03, "name":"3%"},
            {"value":0.05, "name":"5%"},
            {"value":0.06,"name":"6%"}, 
            {"value":0.085, "name":"8.5%"},
            {"value":0.11, "name":"11%"},
            {"value":0.13, "name":"13%"},
            {"value":0.17, "name":"17%"}
         ]
      });
    
    //使用到的界面引入上面js文件后, 使用. 测试加载都没有问题.
    
    <ext:ComboBox ID="TaxRatio"  StoreID="VTaxRatioCMB" AutoDataBind="true" ValueField="value"  DisplayField="name" runat="server" FieldLabel="税率/征收率" Editable="false" LabelAlign="Right" AnchorHorizontal="90%" EmptyText="" TabIndex="24" IndicatorText="*" IndicatorCls="Indicator" AllowBlank="false">
    				   <CustomConfig>
    				   <ext:ConfigItem Name="tooltip" Value="税率/征收率" />
    				   </CustomConfig>
    				   <Listeners>
    					   <Select Handler="
    						">
    					 </Select>
    				 </Listeners>
    				   </ext:ComboBox>
    
    

    题外话

    • 界面表单加载 combobox时原本通过如下方式加载, 这种定义store方式 赋值combobox 不影响对应逻辑. 需要注意值类型
    var initComboxByValue = function (comb) {
    			var value = comb.getValue();
    			// 此处value定义的类型需要为Int类型, 不然无法匹配类型
    
    			var record = comb.findRecordByValue(value);
    			if (record) {
    			comb.setSelectedItems(record);
    			} else {
    			comb.setValue('');
    			}
    			
    		}
    /处理combox数据
    		var combs = App.ValueAddedTaxPanel.queryBy(function (item) {
    			return item.getXType() == 'combobox';
    		});
    		Ext.Array.each(combs, function (item) {
    			initComboxByValue(item);
    		});
    
  • 相关阅读:
    input 去除边框
    分页封装
    python后端继承序列化,不同访问形式返回不同结果
    解决vue前端不显示自定义字段
    Vue 获取后端多对多关联表信息
    vue 前段增删改查代码规范
    前段增删改查的应用
    ant-design-vue基础
    python 后端 数据库的创表及增删改查 简单使用
    配置Uwsgi+Nginx+Django+Vue
  • 原文地址:https://www.cnblogs.com/hijushen/p/6702411.html
Copyright © 2020-2023  润新知