extjs grid 中 如何根据数据动态给checkbox赋值

Posted 2023-04-19

参考技术A renderer:function(v)�0�2return '<input type="radio" checked="'+((v=='male')?true:false)+'">";我的客户要求 Grid 只是显示 不能编辑 bool值用checkBox表示那就用渲染函数实现吧，你需要动态赋值，目前这个方法最容易了，把上面我写的radio改成checkbox就行了 2009-09-22 15:11 推荐: 0 次 有帮助？ 请推荐html code<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/><script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><style> .brclear:both;display:block;</style><script> Ext.onReady(function() var sm =new Ext.grid.CheckboxSelectionModel(); var cm =new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, header:'编号',dataIndex:'id', header:'性别',dataIndex:'sex', renderer:function(v) if(v=="male") return"<div class='x-form-check' style='background-position:0 -13px;'></div>"; elsereturn"<div class='x-form-check'></div>" , header:'名称',dataIndex:'name', header:'描述',dataIndex:2009-09-22 15:44 推荐: 0 次 有帮助？ 请推荐 OK thx 搞定 其实我后来自己想明白了……开始时候大量时间在想通过 Ext.grid.CheckboxSelectionModel 来实现。。。。本回答被提问者采纳

ExtJS 根据商店项目动态创建元素

【中文标题】ExtJS 根据商店项目动态创建元素

【英文标题】：ExtJS create elements dynamically based on store items

【发布时间】：2019-02-12 10:37:02

【问题描述】：

是否可以使用store 属性创建除Ext.panel.Grid 之外的其他一些元素？

例如。假设我有一个面板：

Ext.create('Ext.panel.Panel', 

layout: 'vbox',
scrollable: true,
items: [
    myItemsFunction()
]
));

我从后端得到这个响应：

    "rows": [
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "de.txt",
        "id": "1"
    ,
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "en.txt",
        "id": "2"
    ,
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "it.txt",
        "id": "3"
    ]

我在商店中加载的：

var store_documents = Ext.create('Ext.data.Store', 
    remoteSort: true,
    remoteFilter: true,
    proxy: 
        type: 'ajax',
        api: 
            read: baseURL + '&SubFunc=Documents&Action=view',
        ,
        reader:  type: 'json', rootProperty: 'rows', totalProperty: 'total' 
    ,
    autoLoad: true
);

现在，假设我想要这三个文件（de.txt、en.txt、it.txt）的下载按钮。如何根据商店项目动态创建它们？我想把它放在这个myItemsFunction() 中并在面板项中显示它（代码示例的第一个块）？

或者商店只能与Grid绑定？

【参考方案1】：

您可以使用 ExtJs 存储而不将其绑定到网格，因为 Ext.data.Store 有一个代理，当您调用 store.load() 时它充当 ajax 请求。

所以你可以找到这个工作示例ExtJs Fiddle 基本思想是定义一个新的面板类并使用 initComponent() 函数允许您根据从请求中检索到的数据创建动态项目

app.js

Ext.application(
    name: 'Fiddle',
    launch: function () 
        var storeData = ;
        let store = Ext.create('Ext.data.Store', 
            storeId: 'myStoreId',
            fields: ['id', 'name'],
            proxy: 
                type: 'ajax',
                url: 'app/data.json',
                reader: 
                    type: 'json',
                    rootProperty: 'rows'
                
            
        );
        store.load(function()
            storeData = this.getData().items;
            Ext.create('Fiddle.MyPanel',panelData:storeData);
        );
    
);

app/MyPanel.js

Ext.define('Fiddle.MyPanel', 
    extend: 'Ext.panel.Panel',
    renderTo: Ext.getBody(),
    title: 'Dynamic button creation',
    width: 600,
    height: 300,
    initComponent: function () 
        let panelItems = [];
        //Creating items dynamicly
        for (btn in this.panelData) 
            let me = this;
            panelItems.push(
                Ext.create('Ext.button.Button', 
                    text:me.panelData[btn].data.Name
                )
            );
        
        this.items = panelItems;
        //must call this.callParent()
        this.callParent();
    
)

app/data.json

    "rows": [
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "de.txt",
        "id": "1"
    ,
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "en.txt",
        "id": "2"
    ,
    
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "it.txt",
        "id": "3"
    ]

【参考方案2】：

为您的面板定义一个控制器；

为afterrender创建一个事件函数；

在里面，加载你的商店；

将回调参数传递给商店的加载函数，在该函数中迭代加载的数据创建按钮组件；

调用this.getView().add(button) 将按钮添加到面板items 属性