`

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]
});

 

 

  • 大小: 18.8 KB
0
4
分享到:
评论
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'
  ]);

相关推荐

    extjs4.2的itemselector

    `说明.docx` 文件很可能是对修改过程的详细文档,包含了修改的原因、步骤以及如何在实际应用中使用这个修复后的 `itemselector` 组件。文档可能还包含了示例代码、截图以及如何配置 `fromstore` 和 `tostore` 的说明...

    extJS3.1源码及demo

    ExtJS 是一个流行的JavaScript库,...不过需要注意,随着技术的发展,ExtJS已经更新到了更高版本,如4.x和6.x,引入了更多新特性和性能优化,因此在实际项目中,可能需要考虑使用最新版本以获取更好的支持和兼容性。

    Extjs treeselector 树结构选择器

    ExtJS TreeSelector是一款基于ExtJS库的组件,它扩展了基础的itemselector功能,提供了一种以树形结构展示数据的选择器。这个组件特别适用于那些需要用户从层次化的数据集中进行选择的应用场景,例如组织架构、目录...

    模仿Ext4实现ItemSelector

    模仿Ext4实现ItemSelector,在Rally App开发中虽然是Ext4,但ux包下面的对象被阉割了 所以手动实现了一个,布局和组件化方面还有待改进。

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    itemSelector: 'div.x-combo-list-item' } }); ``` 这个例子创建了一个多选的ComboboxTree,其数据源是一个包含部门信息的TreeStore。 8. **优化与注意事项** - 对于大数据量的树形结构,考虑使用异步加载(`...

    用extjs 4.0打造自己的WEB桌面

    我们可以使用 ExtJS 4.0 的 layout manager 来实现图标的自动换行。下面是一个简单的实现方法: 首先,我们需要在 desktop.js 文件中添加一个 initShortcut 函数,该函数用于初始化桌面图标的排列方式。函数中,...

    解决extjs 桌面图标换行方法

    - **定义行和列的位置**:使用`col`和`row`对象记录当前行和列的位置。 - **获取任务栏的高度**:通过查询DOM元素来确定任务栏的高度,从而计算出可用于放置图标的区域。 - **遍历图标元素**:通过`Ext.query`来获取...

    Extjs MultiselectItemSelector

    "Extjs MultiselectItemSelector" 是一个基于ExtJs框架的组件,用于实现多选项选择器功能。在Web应用开发中,这样的组件常用于让用户能够从一组可选项中选取多个项目,例如在用户管理界面中选择多个用户进行操作。...

    Extjs事件和模板

    itemSelector: 'div' }); Ext.getCmp('container').add(list); // 假设有一个id为'container'的容器 } }); }); ``` 综上所述,EXTJS的事件系统和模板机制是其强大功能的重要组成部分。通过理解和熟练运用这两...

    extjs+struts2的一个套路模式

    例如,`getImageDataView()`函数创建了一个`DataView`实例,其中`itemSelector`定义了项的选择器,`style`控制滚动条行为,`multiSelect`允许多选。 #### 2.2 JsonStore实例化 `getPhotosJsonStore()`函数创建了一...

    icon combobox

    **ExtJS Icon Combobox详解** 在Web开发领域,ExtJS是一个强大的JavaScript库,它提供了丰富的组件和工具,用于构建复杂的用户界面...在实际开发中,熟练掌握Icon Combobox的使用,可以极大地提升Web应用的用户体验。

    ExtNet控件使用心得

    ### ExtNet控件使用心得详解 #### Panel控件特性概览 Panel控件在ExtNet框架中扮演着至关重要的角色,其丰富的配置选项使得开发者能够创建出高度定制化的界面组件。以下是一些关键特性的详细解析: - **Closable*...

    EXT2.0分页

    在实际项目中,开发者还需要关注分页效率和用户体验,例如通过缓存策略减少不必要的请求,或者使用懒加载技术,只在用户滚动到可视区域时加载更多数据。此外,优化分页组件的样式和交互,使其符合用户习惯也是提高...

    如何实现带有清单的组合框并选择ext js 4.2中的所有选项

    itemSelector: 'div.x-boundlist-item', getInnerTpl: function() { return '{name}'; } }, listeners: { checkchange: function(field, record, checked) { // 更新选择的值 } } }); ``` 6. **注意...

Global site tag (gtag.js) - Google Analytics