wbr2005
2009-07-20 10:19
浏览 309
已采纳

如何从一个gridpanel获取数据在另一个gridpanel显示?

[size=xx-small][/size]想问一下,怎样让下面的表格只显示上面表格选中的2行
[b]问题补充:[/b]
我的问题是,是否可以通过var records = grid1.getSelections();记录选中的行信息,然后把这个records数据传递给grid2里面的[align=left][/align]store里面的[align=left][/align]data,这里我不知道怎么处理或者有其他方法吗?
[b]问题补充:[/b]
[img][/img]
[b]问题补充:[/b]
[color=darkred][/color][color=darkred][/color]
var rowSelect =grid1.getSelectionModel().getSelections();//返回数组
rowSelect[0] rowSelect[1] //返回Record
我能在grid1里直接调用grid2里的store吗?

grid2.store.add( rowSelect[0] );
grid2.store.add( rowSelect[1] );

还是
grid2.getStore.add( rowSelect[0]);
grid2.getStore.add( rowSelect[1]);

能不能具体一点,直接能用的,这一块语法我有些晕乎。
[b]问题补充:[/b]
是上面的过滤到下面
[b]问题补充:[/b]
非常感谢大家的帮忙。atian25 给的例子的效果是我想要的。我是要实现组件横排。grid2只能用id返回吧。照着那个例子改了下,现在问题是配置sm1时,运行出错,不知怎么回事?效果如图
[code="java"][/code]


通过布局嵌套实现表单横排




<br> Ext.onReady(function(){<br> Ext.BLANK_IMAGE_URL = &#39;../../extjs2.0/resources/images/default/s.gif&#39;;<br> var sm1= new Ext.grid.CheckboxSelectionModel(<br> [color=blue]/*<br> listeners:{<br><br> &#39;rowselect&#39;:function(sm,rowIndex,record){<br><br> Ext.getCmp(&#39;grid2&#39;).getStore().add(record);<br><br> },<br><br> &#39;rowdeselect&#39;:function(sm,rowIndex,record){<br><br> Ext.getCmp(&#39;grid2&#39;).getStore().remove(record);<br><br> }<br><br> }<br><br> */[/color]<br> );<br> var sm2 = new Ext.grid.CheckboxSelectionModel();<br><br> var form = new Ext.form.FormPanel({<br> title:&#39;通过布局嵌套实现表单横排&#39;,<br> labelSeparator :&#39;:&#39;,//分隔符<br> labelWidth : 50,//标签宽度<br> bodyStyle:&#39;padding:5 5 5 5&#39;,//表单边距<br> frame : false,<br> height:600,<br> width:600,<br> applyTo :&#39;form&#39;,<br> items:[<br> {<br> xtype : &#39;panel&#39;,<br> layout : &#39;column&#39;,//嵌套列布局<br> border : false,//不显示边框<br> height:150,<br> defaults : {//应用到每一个子元素上的配置<br> border : false,//不显示边框<br> layout : &#39;form&#39;,//在列布局中嵌套form布局<br> columnWidth : .9//列宽<br> },<br> items : [<br> {<br> labelSeparator :&#39;:&#39;,//分隔符<br> items : {<br> xtype : &#39;grid&#39;,<br> width: 400,<br><br> height: 140,<br><br> autoScroll: true,<br><br> trackMouseOver:false,<br><br> sm:sm1,<br><br> columns: [<br><br> sm1,<br><br> {header: &#39;序号&#39;, dataIndex: &#39;id&#39;, sortable: true },<br><br> {header: &#39;名字&#39;, dataIndex: &#39;name&#39;, sortable: true},<br><br> {header: &#39;描述&#39;, dataIndex: &#39;descript&#39;, sortable: true}<br><br> ],<br><br> store:new Ext.data.SimpleStore({<br><br> fields:[&#39;id&#39;,&#39;name&#39;,&#39;descript&#39;],<br><br> data:[<br><br> [1,&#39;name001&#39;,&#39;this is name001&#39;],<br><br> [2,&#39;name002&#39;,&#39;this is name002&#39;],<br><br> [3,&#39;name003&#39;,&#39;this is name003&#39;],<br><br> [4,&#39;name004&#39;,&#39;this is name004&#39;]<br><br> ]<br><br> })<br><br> }<br> }<br> ]<br> },</p> <pre><code> { xtype : &#39;panel&#39;, layout : &#39;column&#39;,//嵌套列布局 border : false,//不显示边框 defaults : {//应用到每一个子元素上的配置 border : false,//不显示边框 layout : &#39;form&#39;,//在列布局中嵌套form布局 columnWidth : .5//列宽 }, items : [ { labelSeparator :&#39;:&#39;,//分隔符 items : { xtype : &#39;textfield&#39;, fieldLabel:&#39;性别&#39;, anchor:&#39;85%&#39; } }, { items : { xtype : &#39;button&#39;, text:&#39;确定&#39; } } ] }, { xtype : &#39;panel&#39;, layout : &#39;column&#39;,//嵌套列布局 border : false,//不显示边框 defaults : {//应用到每一个子元素上的配置 border : false,//不显示边框 layout : &#39;form&#39;//在列布局中嵌套form布局 }, items : [ { labelSeparator :&#39;:&#39;,//分隔符 columnWidth :.7, items : { xtype : &#39;grid&#39;, width: 400, height: 140, id:&#39;grid2&#39;, autoScroll: true, trackMouseOver:false, sm:sm2, columns: [ sm2, {header: &#39;序号&#39;, dataIndex: &#39;id&#39;, sortable: true }, {header: &#39;名字&#39;, dataIndex: &#39;name&#39;, sortable: true}, {header: &#39;描述&#39;, dataIndex: &#39;descript&#39;, sortable: true} ], store:new Ext.data.SimpleStore({ fields:[&#39;id&#39;,&#39;name&#39;,&#39;descript&#39;] }) } }, { columnWidth :.3, items : [{ xtype : &#39;button&#39;, text:&#39;查询&#39;, handler : function(){} }, { xtype : &#39;button&#39;, text:&#39;删除&#39; } ] } ] } ] }) }); </code></pre> <p>





 


[b]问题补充:[/b]
[quote]你是不是要在上面选几个课题组,然后把属于这个课题组的人员在下面的grid中选中?
[/quote]
呵呵,其实第二个表格开始是空表,第一个表格选中的加进去就好了。现在那个sm1里面的配置加上后运行不出来,去掉就可以,我也想直接用grid2.getStore().add(record); 不过我用的xtype,这种方式用不了,不知道怎样调用grid2,用Ext.getCmp('grid2').getStore().add(record); 有问题吗?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

15条回答 默认 最新

  • iteye_20589 2009-07-20 15:51
    已采纳

    [quote]var sm1= new Ext.grid.CheckboxSelectionModel(
    /*
    listeners:{

    'rowselect':function(sm,rowIndex,record){

    Ext.getCmp('grid2').getStore().add(record);

    },

    'rowdeselect':function(sm,rowIndex,record){

    Ext.getCmp('grid2').getStore().remove(record);

    }

    }

    */
    ); [/quote]

    改成这样...
    var sm1= new Ext.grid.CheckboxSelectionModel( {

    listeners:{

    'rowselect':function(sm,rowIndex,record){

    Ext.getCmp('grid2').getStore().add(record);

    },

    'rowdeselect':function(sm,rowIndex,record){

    Ext.getCmp('grid2').getStore().remove(record);

    }

    }

    });

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • iteye_20589 2009-07-20 10:33

    把下面表格的store 里的data 处理一下就行了吧..

    评论
    解决 无用
    打赏 举报
  • weixin_42322952 2009-07-20 10:45

    上面表格选中两行.会产生一个动作。用这个动作绑定下面两行

    评论
    解决 无用
    打赏 举报
  • weixin_42322952 2009-07-20 10:53

    比如
    gridbind = function() {
    grid.store.reload();
    }

    Ext.getCmp('country').addListener('select', gridbind);

    评论
    解决 无用
    打赏 举报
  • iteye_20589 2009-07-20 11:18

    应该可能吧..
    grid1 加个rowselect 事件
    var rowSelect =grid.getSelectionModel().getSelections();//返回数组
    rowSelect[0] rowSelect[1] //返回Record
    加到grid2的store里...
    store.add( rowSelect[0] );
    store.add( rowSelect[1] );

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 11:22

    你要的是上面的Grid选择后过滤下面的Grid,还是选择后添加记录到下面的Grid?

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 11:38

    添加记录到下面的Grid:

    [code="javascript"]
    Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '/images/s.gif';
    Ext.QuickTips.init();
    testMuliGrid();
    });
    function testMuliGrid(){
    //关键点
    var sm1 = new Ext.grid.CheckboxSelectionModel({
    listeners:{
    'rowselect':function(sm,rowIndex,record){
    grid2.getStore().add(record);
    },
    'rowdeselect':function(sm,rowIndex,record){
    grid2.getStore().remove(record);
    }
    }
    });
    var grid1 = new Ext.grid.GridPanel({
    width: 800,
    height: 200,
    autoScroll: true,
    trackMouseOver:false,
    sm:sm1,
    columns: [
    sm1,
    {header: '序号', dataIndex: 'id', sortable: true },
    {header: '名字', dataIndex: 'name', sortable: true},
    {header: '描述', dataIndex: 'descript', sortable: true}
    ],
    viewConfig:{
    forceFit:true
    },
    renderTo:document.body,
    store:new Ext.data.SimpleStore({
    fields:['id','name','descript'],
    data:[
    [1,'name001','this is name001'],
    [2,'name002','this is name002'],
    [3,'name003','this is name003'],
    [4,'name004','this is name004']
    ]
    })
    });
    var sm2 = new Ext.grid.CheckboxSelectionModel({});
    var grid2 = new Ext.grid.GridPanel({
    width: 800,
    height: 200,
    autoScroll: true,
    trackMouseOver:false,
    sm:sm2,
    columns: [
    sm2,
    {header: '序号', dataIndex: 'id', sortable: true },
    {header: '名字', dataIndex: 'name', sortable: true},
    {header: '描述', dataIndex: 'descript', sortable: true}
    ],
    viewConfig:{
    forceFit:true
    },
    renderTo:document.body,
    store:new Ext.data.SimpleStore({
    fields:['id','name','descript']
    })
    });
    }
    [/code]

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 11:52

    [quote]
    grid2.store.add( rowSelect[0] );
    grid2.store.add( rowSelect[1] );

    还是
    grid2.getStore.add( rowSelect[0]);
    grid2.getStore.add( rowSelect[1]);

    能不能具体一点,直接能用的,这一块语法我有些晕乎。
    [/quote]

    grid2.store 或 grid2.getStore()
    前者直接找对象,后者通过get方法获取.
    而grid2.getStore必然报错

    评论
    解决 无用
    打赏 举报
  • iteye_20589 2009-07-20 11:53

    [quote]grid2.getStore.add( rowSelect[0]);
    grid2.getStore.add( rowSelect[1]); [/quote]
    是这个...你有不懂的地方..看API应该就懂了..

    grid2.getStore返回的是grid2的store
    add(record)方法是添加record到sotre

    评论
    解决 无用
    打赏 举报
  • iteye_20589 2009-07-20 14:02

    [quote]是上面的过滤到下面 [/quote]
    就是上面选中的添加到下面的表格吧..
    就是
    [code="java"]grid2.getStore.add( rowSelect[0]);
    grid2.getStore.add( rowSelect[1]); [/code]

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 14:03

    我糊涂了...

    你2个grid显示的原始内容是一样的?

    上面的选择某些列后,下面的根据上面选择的名字来过滤下面的?

    还是咋样?

    仔细描述下需求吧....

    评论
    解决 无用
    打赏 举报
  • zhoujuan520 2009-07-20 14:05

    [code="js"]var records = grid1.getSelections();
    for(var i=0; i< records.length; i++){
    grid2.getStore().insert(0,records[i];
    }[/code]

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 14:05

    你是不是要在上面选几个课题组,然后把属于这个课题组的人员在下面的grid中选中?

    评论
    解决 无用
    打赏 举报
  • iteye_20589 2009-07-20 15:55

    [quote]grid2.getStore().add(record); 不过我用的xtype,这种方式用不了,不知道怎样调用grid2,用Ext.getCmp('grid2').getStore().add(record); 有问题吗? [/quote]
    用xtype有问题吗?我写的grid2是对象,..你只要得到这个对象就行了..
    Ext.getCmp('grid2')..不就获取grid2的组件对象...
    另外还有其他几种获取对象的方法...

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-07-20 16:14

    报啥错?

    至于xtype,没啥关系.
    你可以指定ID,然后getCmp.
    当然,如果你觉得这样不优雅的话,就用

    find( String prop, String value ) : Array
    Find a component under this container at any level by property
    Container

    findBy( Function fn, [Object scope] ) : Array
    Find a component under this container at any level by a custom function. If the passed function returns true, the com...
    Container

    findById( String id ) : Ext.Component
    Find a component under this container at any level by id
    Container

    [b]findByType( String/Class xtype, [Boolean shallow] ) : Array
    Find a component under this container at any level by xtype or class[/b]
    等方法.

    或者你遍历父容器的item,然后根据某个特征找到它。

    另外,3.0里面新增了个itemId

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题