extJS-itemselector的使用

 

上图是富客户端界面中常用的选择方式，下面是项目中的一段示例代码，仅供初学者参考：

 

var _smsTemplateToStore = new Ext.data.Store({
    id:"_smsTemplateToStore",
    proxy : new Ext.data.HttpProxy({url:"modelSelectedData.jsp"}),
    reader: new Ext.data.JsonReader({
        totalProperty:"totalProperty",
        root:"root"},
	[
	    {name:"code"},
	    {name:"desc"}
			]
	)
    });	
	
	
    var _smsTemplateFromStore = new Ext.data.Store({
        id:"_smsTemplateToStore",
        proxy : new Ext.data.HttpProxy({url:"moduleUnSelectedData.jsp"}),

        reader: new Ext.data.JsonReader({
            totalProperty:"totalProperty",
            root:"root"},
            [
	{name:"code"},
	{name:"desc"}
        )
});



var _toolbarStudyClassTypeNodes = new Ext.Toolbar({
    items:[	{
	text:"保存",
	pressed : true,
	iconCls : 'icon-table-save',
	handler:function(){
	    saveRelation();
	}
	}]
		
});


var isForm = new Ext.form.FormPanel({
        title: '班型-模块列表选择',
        //width: bodyWidth-180,
        height: 340,
        bodyStyle: 'padding:5px;',
        tbar:_toolbarStudyClassTypeNodes,
		
        items:[{
            xtype:"itemselector",
            name:"itemselector",
            fieldLabel:"信息",
            //labelWidth:1,
            dataFields:["code", "desc"],
            toData:[],
            msWidth:220,
            msHeight:260,
            valueField:"code",
            displayField:"desc",
            imagePath:"../images/",
            toLegend:"已选择",
            fromLegend:"待选择",
            fromData:[],
            fromStore:_smsTemplateFromStore,
            toStore:_smsTemplateToStore         
        }]
    });


var _panelStudyClassTypeNodes = new Ext.Panel({
    collapsible:true,
    width:bodyWidth-180,
    height:350,    	
    autoScroll:true,
    	
    items:[isForm]
});

 

 

评论

1 楼 weasel100 2014-06-04  

哥们，你用的是EXT的那个版本，不算是你的方法，还是我自己写的方法（拿官方的例子改的），都报这个错，
TypeError: me.store is null
if (me.store.autoCreated) {              MultiSelect.js (第 146 行)
我用的是ext-4.0.7-gpl我还尝试在ext-4.2.1.883上试过，也报这个错

下面是我引用的文件头，看看有没有什么关键信息没有配置呢？
   <link rel="stylesheet" type="text/css" href="./ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext-4.2.1.883/bootstrap.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/examples/ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/examples/ux/form/ItemSelector.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/examples/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/examples/ux/data/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/examples/ux/statusbar/StatusBar.js"></script>
<script type="text/javascript" src="./ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="./ext-4.2.1.883/examples/ux/css/ItemSelector.css" />
  <script type="text/javascript">
  Ext.Loader.setConfig({enabled: true});
  Ext.Loader.setPath('Ext.ux', './ext-4.2.1.883/examples/ux');
  Ext.require([
      'Ext.form.Panel',
      'Ext.ux.form.MultiSelect',
      'Ext.ux.form.ItemSelector'
  ]);