EXT2.0 窗口树双栏多选_代码

预览:


代码:

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',
        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) {
        ds_addr.load(
{params:{index:''+node}});  
    }
);

    
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();

}
);



下载地址:

http://cn.ziddu.com/download.php?uid=crGempyncrCh4palabKWlJqiaaygnJc%3D9

posted @ 2008-06-02 15:25 meetrice 阅读(...) 评论(...) 编辑 收藏