学步园

预览:

代码:

Ext.BLANK_IMAGE_URL = 'js/ext-2.0/resources/images/default/s.gif';

Ext.onReady(function() {

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    var items = [["123", "中华人民共和国"], ["1", "江苏省"], ["2", "浙江省"], ["3", "广东省"],
            ["4", "四川省"], ["5", "湖北省"], ["6", "湖南省"], ["7", "贵州省"],
            ["8", "江西省"], ["9", "辽宁省"]];

    var store = new Ext.data.SimpleStore({
        fields : ["id_p", "nombre"],
        data : items

    });

    var itemSelI = {
        xtype : "itemselector",
        name : "itemselector",
        fieldLabel : "双栏选框",
        dataFields : ["id_p", "nombre"],
        fromStore : store,
        toData : ["9", "辽宁省"],
        msWidth : 180,
        autoScroll : true,
        msHeight : 250,
        valueField : "id_p",
        displayField : "nombre",
        // imagePath:"ext-ux/multiselect",
        // switchToFrom:true,
        toLegend : "已选栏",
        fromLegend : "可选栏",
        toTBar : [{
            text : "取消选择",
            handler : function() {
                var i = formItemSelector.getForm().findField("itemselector");
                i.reset.call(i);
            }
        }]
    }

    var formItemSelector = new Ext.form.FormPanel({
        labelWidth : 75,
        width : 700,
        baseCls : 'x-plain',
        layout : 'absolute',
        items : [itemSelI]
    });

    var tree = new Ext.tree.TreePanel({

        animate : true,
        enableDD : true,
        containerScroll : true,
        ddGroup : 'organizerDD',
        rootVisible : true,
        region : 'west',
        width : 150,
        split : true,
        autoScroll : true,
        collapseMode : 'mini',
        border : false,
        // margins: '5 0 5 5',
        loader : new Ext.tree.TreeLoader({
            dataUrl : 'addressBook.do?dispatch=queryAddressBook'
        })
    });

    var root = new Ext.tree.AsyncTreeNode({
        text : '通讯录',
        draggable : false,
        id : '1'
    });

    tree.setRootNode(root);

    tree.on('click', function(node) {
        store.loadData([["1", "江苏省"], ["2", "浙江省"], ["3", "广东省"]]);

    });

    var itlayout = new Ext.Panel({
        id : 'images',
        region : 'center',
        bodyStyle : 'background:white;padding:5px;',
        border : false,
        layout : 'fit',

        items : formItemSelector
    });

    var tritlayout = new Ext.Panel({
        layout : 'border',
        border : true,
        items : [tree, itlayout]
    });

    var windowconfig = {
        title : '测试',
        width : 575,
        height : 350,
        autoScroll : true,
        bodyStyle : 'background:white;padding:5px;',
        layout : 'fit',
        items : [tritlayout],
        buttons : [{
            text : "取值",
            handler : function() {
                alert(formItemSelector.getForm().getValues(true));
            }
        }]
    }
    var window = new Ext.Window(windowconfig);
    window.show();

});

Data Store版本:

json数据 itemstore.json :

{
        "results" : [{
            "id_p" : "3",
            "nombre" : "asdf"
        }, {
            "id_p" : "1",
            "nombre" : "Federico"
        }, {
            "id_p" : "2",
            "nombre" : "jose luis"
        }, {
            "id_p" : "6",
            "nombre" : "migueld"
        }, {
            "id_p" : "5",
            "nombre" : "nacho"
        }, {
            "id_p" : "4",
            "nombre" : "tuetye"
        }],
        "total" : 6
    }

代码:

Ext.BLANK_IMAGE_URL = 'js/ext-2.0/resources/images/default/s.gif';

Ext.onReady(function() {

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    var ds_addr = new Ext.data.Store({
        autoLoad : true,
        url : 'itemstore.json',
        reader : new Ext.data.JsonReader({
            id : 'id_p',
            root : 'results',
            totalProperty : 'total'
        }, [{
            name : 'id_p'
        }, {
            name : 'nombre'
        },])
    });

    var itemSelI = {
        xtype : "itemselector",
        name : "itemselector",
        fieldLabel : "双栏选框",
        dataFields : ["id_p", "nombre"],
        fromStore : ds_addr,
        toData : ["9", "辽宁省"],
        msWidth : 180,
        autoScroll : true,
        msHeight : 250,
        valueField : "id_p",
        displayField : "nombre",
        // imagePath:"ext-ux/multiselect",
        // switchToFrom:true,
        toLegend : "已选栏",
        fromLegend : "可选栏",
        toTBar : [{
            text : "取消选择",
            handler : function() {
                var i = formItemSelector.getForm().findField("itemselector");
                i.reset.call(i);
            }
        }]
    }

    var formItemSelector = new Ext.form.FormPanel({
        labelWidth : 75,
        width : 700,
        baseCls : 'x-plain',
        layout : 'absolute',
        items : [itemSelI]
    });

    var tree = new Ext.tree.TreePanel({

        animate : true,
        enableDD : true,
        containerScroll : true,
        ddGroup : 'organizerDD',
        rootVisible : true,
        region : 'west