请教各位怎样EXT的FormPanel中怎样动态添加表格

请教各位怎样EXT的FormPanel中怎样动态添加表格,第1张

Html:

<html>

<head>

<title>jquery表格 *** 作</title>

<script language="javascript" src="jquery.table.tr.js"></script>

<style type="text/css">

table

{

border: black solid 1px

border-collapse: collapse

}

td

{

border: black solid 1px

padding: 3px

}

.td_Num

{

width: 60px

text-align: center

}

.td_Item

{

width: 160px

text-align: center

}

.td_Oper

{

width: 120px

text-align: center

}

.td_Oper span

{

cursor: pointer

}

</style>

</head>

<body>

<table>

<tr>

大致思路:

//声明好对应grid的Record对象

var ItemRecord = Ext.data.Record.create([

{name:'oid'},

{name:'oidname'},

{name:'vendor'}

])

//点那个添加按钮时则执行类似如下函数

function addRow2Grid(grid){

var values = Ext.getCmp('your_form_id').getForm().getValues() //form各字段的name属性要和ItemRecord里对应以便下面赋值。可以先console.log(values)看看值。

var rec = new ItemRecord(values)//实例化Record对象并赋值

//var rec =new grid.store.recordType(values)//试试这种行不,省了提前声明ItemRecord. grid.store.insert(grid.store.getCount(), rec) //插入作为grid最后一行

grid.getView().refresh()//刷新

}

Ext.onReady(function() {

 

  var sm=new Ext.grid.CheckboxSelectionModel()

 

  var cm=[new Ext.grid.RowNumberer(),sm,

 

   {header:"编号", dataIndex:"id", width:65,hidden : true},

 

   {header:"名称", dataIndex:"name", width:65},

 

   {header:"路径", dataIndex:"url", width:65}

 

   ]

 

  var fd = ["id", "name", "url"]

 

  var store=new Ext.data.JsonStore({

 

   fields:fd

 

  })

 

  var data=[{

 

     id:1,name:"xiao",url:"sssssssssss",sex:"male"

 

     }]

 

  var grid=new Ext.grid.GridPanel({

 

   sm:sm,

 

   columns:cm,

 

   store:store,

 

   width:500,

 

   height:400,

 

   tbar:[{

 

    text:"生成",

 

    icon:"images/icons/add.png",

 

    cls:"x-btn-text-icon",

 

    handler:function(){

 

     var res = {fields:[{name:"sex"}],columns:[{header:'性别',dataIndex:"sex",width:65}]}

 

     var columns = res.columns

 

     var fields = res.fields

 

     for (var i = 0 i < fields.length i++) {

 

      fd.push(fields[i].name)

 

      cm.push(columns[i])

 

     }

 

     //重新绑定store及column

 

     ss=new Ext.data.JsonStore({

 

       fields:fd

 

      })

 

     grid.reconfigure(ss,new Ext.grid.ColumnModel(cm))

  

     ss.loadData(data)

 

    }

 

   }]

 

    

 

  })

 

   

 

  var win=new Ext.Window({

 

   title:"sssssss",

 

   width:700,

 

   height:500,

 

   layout:"fit",

 

   closable:true,

 

   items:[grid]

 

  })

 

  win.show()

 

})

主要是grid里的reconfigure这个方法:配置grid以使用一个不同的Store和Column Model并触发'reconfigure'事件。 视图将会被绑定到新的对象并刷新。

你自己引用ext3的类库吧~


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11541863.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存