javascript - EXT 4.2 कॉम्बो बॉक्स एक्सटेमप्लेट के साथ परिणाम के समूह




extjs combobox grouping extjs4.2 (5)

यह कोड मेरे लिए काम किया गया है: यदि आप सेंचा आर्किटेक्ट का उपयोग कर रहे हैं, तो ओवरराइड के अंदर CreatePicker जोड़ें और मैन्युअल रूप से सूची बनाएं कॉन्फ़िगर एक ऑब्जेक्ट के रूप में।

{
xtype : 'combobox',
createPicker : function () {
    var me = this,
    picker,
    menuCls = Ext.baseCSSPrefix + 'menu',
    opts = Ext.apply({
            selModel : {
                mode : me.multiSelect ? 'SIMPLE' : 'SINGLE'
            },
            floating : true,
            hidden : true,
            ownerCt : me.ownerCt,
            cls : me.el.up('.' + menuCls) ? menuCls : '',
            store : me.store,
            displayField : me.displayField,
            focusOnToFront : false,
            pageSize : me.pageSize
        }, me.listConfig, me.defaultListConfig);

    // NOTE: we simply use a grid panel
    //picker = me.picker = Ext.create('Ext.view.BoundList', opts);


    picker = me.picker = Ext.create('Ext.grid.Panel', opts);

    // hack: pass getNode() to the view
    picker.getNode = function () {
        picker.getView().getNode(arguments);
    };

    me.mon(picker.getView(), {
        refresh : me.onListRefresh,
        scope : me
    });
    me.mon(picker, {
        itemclick : me.onItemClick,
        //            refresh: me.onListRefresh,
        scope : me
    });

    me.mon(picker.getSelectionModel(), {
        selectionChange : me.onListSelectionChange,
        scope : me
    });

    return picker;
},
listConfig : {
    columns : [{
            xtype : "gridcolumn",
            dataIndex : "id",
            text : "Id"
        }, {
            xtype : "gridcolumn",
            dataIndex : "name",
            text : "Name"
        }
    ],
    features : [{
            ftype : "grouping"
        }
    ]
},
fieldLabel : 'Label',
queryMode : 'local',
store : 'myTestStore'

}

मैं कॉम्बोबॉक्स में प्रदर्शित होने वाले समूह परिणामों के लिए स्टोर से मिलने के लिए कोशिश कर रहा हूं। मेरे पास एक कॉम्बोबॉक्स है जो इस तरह दिखता है:

और मुझे इसकी ज़रूरत है:

इसका अर्थ श्रेणी (क्रम / चालान) द्वारा समूहीकृत है।

मेरा कंघी बांबू इस तरह परिभाषित:

Ext.define('NG.view.searchcombo.Combo', {
    requires: ['Ext.form.field.ComboBox'],
    extend: 'Ext.form.ComboBox',
    alias: 'widget.searchcombo',
    minChars:3,
    fieldLabel: 'Choose Search',
    store: 'Search',
    displayField: 'name',
    valueField: 'id',
    typeAhead: false,
    hideLabel: true,
    hideTrigger:false,
    anchor: '100%',

    listConfig: {
        loadingText: 'Searching...',
        emptyText: 'No matching posts found.',

        // Custom rendering template for each item
        getInnerTpl: function() {
            return '<h3>{name} / {category}</h3>' +'{excerpt}' ;
        }
    },
    pageSize: 10,
    initComponent: function () {    

        this.callParent(arguments);
    }
});

और मेरा डेटा ऐसा है:

{"id": 1, "नाम": "एक", "श्रेणी": "चालान"}, {"id": 2, "नाम": "दो", "श्रेणी": "चालान"}, { "id": 3, "name": "one", "category": "order"}, {"id": 4, "name": "two", "category": "order"}, {"id "," नाम ":" तीन "," श्रेणी ":" चालान "}, {" id ": 6," नाम ":" चार "," श्रेणी ":" चालान "}, {" id ": 7, "नाम": "तीन", "श्रेणी": "आदेश"}, {"id": 8, "नाम": "चार", "श्रेणी": "आदेश"}, {"id": 9, "नाम": "पांच", "श्रेणी": "चालान"}, {"id": 10, "नाम": "छः", "श्रेणी": "चालान"}, {"id": 11, "नाम "" "" "" "," "", "" "," "", "" "," "", "name": "," "name": "six", "category": "order"}, {"id": 13, "name" "सात", "श्रेणी": "चालान"}, {"id": 14, "नाम": "आठ", "श्रेणी": "चालान"}, {"id": 15, "नाम": "सात "," श्रेणी ":" आदेश "}, {" id ": 16," नाम ":" आठ "," श्रेणी ":" आदेश "}]

मुझे लगता है कि Ext.XTemplate का उपयोग करके किया जा सकता है, लेकिन मैं Ext.XTemplate से परिचित नहीं हूँ


मैं एक बहुत ही सरल समाधान चाहता था, इसलिए मैं उन चीज़ों को साझा करूँगा जो मेरे साथ आए थे।

मेरे उद्देश्यों के लिए, मेरे पास एक ऐसी key थी, जिसे मैं समूह करना चाहता था, जो एक एकल चरित्र है। मुझे पता है कि मैं हर कुंजी के लिए दिखाना चाहते हैं, इसलिए मैं सूची को पहले से क्रमबद्ध करता हूं ताकि सुनिश्चित हो सके कि प्रकार एक साथ आते हैं, और फिर मैं हर बार जब एक नया कुंजी देखता हूं तो मैं सिर्फ एक समूह शीर्षलेख प्रस्तुत करता हूं

myStore.sort('key', 'DESC');

Ext.create('Ext.form.field.ComboBox', {
  store: myStore,
  queryMode: 'local',
  displayField: 'name',
  valueField: 'id',
  listConfig: {
    cls: 'grouped-list'
  },
  tpl: Ext.create('Ext.XTemplate',
    '{[this.currentKey = null]}' +
    '<tpl for=".">',
      '<tpl if="this.shouldShowHeader(key)">' +
        '<div class="group-header">{[this.showHeader(values.key)]}</div>' +
      '</tpl>' +
      '<div class="x-boundlist-item">{name}</div>',
    '</tpl>',
    {
      shouldShowHeader: function(key){
        return this.currentKey != key;
      },
      showHeader: function(key){
        this.currentKey = key;
        switch (key) {
          case 's': return 'Structures';
          case 'f': return 'Filters';
          ...
        }
        return 'Other';
      }
    }
  )
});

निम्न सीएसएस का उपयोग करना:

.grouped-list .x-boundlist-item {
  padding: 1px 3px 0 10px
}

.grouped-list .group-header {
  padding: 4px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

और यह डेटा:

[
    { key: 's', name: '2014 Product Development' },
    { key: 'f', name: 'Message Filter' },
    { key: 's', name: '2014 Product Development (Little)' },
    { key: 's', name: 'Global Structure' },
    { key: 'f', name: 'My SW' }
]

मुझे इस तरह से अच्छी तरह से समूहीकृत सूची मिली:


मैंने कॉम्बो का अपना संस्करण ग्रिड के साथ अपने सूची घटक के रूप में लागू किया है आप इसे GitHub पर प्राप्त कर सकते हैं, और मैंने कुछ उदाहरण ऑनलाइन डाल दिए हैं

तीसरा उदाहरण आप जो हासिल करने की कोशिश कर रहे हैं, उसके करीब से मिलते हैं।

यहां एक ऐसा उदाहरण है जो अधिक बारीकी से मेल खाएगा। आपको केवल स्टाइल के साथ छोड़ दिया जाएगा:

Ext.widget('gridpicker', {

    queryMode: 'local'
    ,displayField: 'name'

    ,store: {
        fields: ['name', 'group']
        ,proxy: {type: 'memory', reader: 'array'}
        ,data: ...
        ,groupField: 'group'
        ,sorters: {property: 'name', order: 'ASC'}
    }

    ,gridConfig: {
        features: [{
            ftype:'grouping'
            ,groupHeaderTpl: '{name}'
            ,collapsible: false
        }]
        ,columns: [{
            width: 30
            ,renderer: function(value, md, record, rowIndex) {
                return '<img src="..." />';
            }
        },{
            dataIndex: 'name'
            ,flex: 1
        }]
    }
});

यह एक विस्तार है जो ऊपर दिए गए सीन ऐडकिन्सन के उत्तर में सुधार करता है जो उसके कोड से पुन: उपयोग करने योग्य घटक बनाकर

मेरे पास 5.0.0.1 के साथ एक ग्रिडपैनेल के साथ बाउंडलिस्ट की जगह के साथ मिश्रित परिणाम हैं, क्योंकि मैं इसके लिए उपयोग किया था।

एक चेतावनी यह समूह गिरने का समर्थन नहीं करता है लेकिन यह मेरे लिए बहुत अच्छा काम करता है

एक्स्टजेस 4.2.3 और 5.0.1 में परीक्षण किया गया।

आप इसे सेन्का बेला में देख सकते हैं

आशा है कि इसमें किसी को मदद मिलेगी

Ext.define('Ext.ux.GroupComboBox', {
  extend: 'Ext.form.field.ComboBox',
  alias: 'widget.groupcombobox',
  /*
   * @cfg groupField String value of field to groupBy, set this to any field in your model
   */
  groupField: 'group',
  listConfig: {
    cls: 'grouped-list'
  },
  initComponent: function() {
    var me = this;
    me.tpl = new Ext.XTemplate([
      '{%this.currentGroup = null%}',
      '<tpl for=".">',
      '   <tpl if="this.shouldShowHeader(' + me.groupField + ')">',
      '       <div class="group-header">{[this.showHeader(values.' + me.groupField + ')]}</div>',
      '   </tpl>',
      '   <div class="x-boundlist-item">{' + me.displayField + '}</div>',
      '</tpl>', {
        shouldShowHeader: function(group) {
          return this.currentGroup != group;
        },
        showHeader: function(group) {
          this.currentGroup = group;
          return group;
        }
      }
    ]);
    me.callParent(arguments);
  }
});

//Example usage
var Restaurants = Ext.create('Ext.data.Store', {
  storeId: 'restaraunts',
  fields: ['name', 'cuisine'],
  sorters: ['cuisine', 'name'],
  groupField: 'cuisine',
  data: [{
    name: 'Cheesecake Factory',
    cuisine: 'American'
  }, {
    name: 'University Cafe',
    cuisine: 'American'
  }, {
    name: 'Creamery',
    cuisine: 'American'
  }, {
    name: 'Old Pro',
    cuisine: 'American'
  }, {
    name: 'Nola\'s',
    cuisine: 'Cajun'
  }, {
    name: 'House of Bagels',
    cuisine: 'Bagels'
  }, {
    name: 'The Prolific Oven',
    cuisine: 'Sandwiches'
  }, {
    name: 'La Strada',
    cuisine: 'Italian'
  }, {
    name: 'Buca di Beppo',
    cuisine: 'Italian'
  }, {
    name: 'Pasta?',
    cuisine: 'Italian'
  }, {
    name: 'Madame Tam',
    cuisine: 'Asian'
  }, {
    name: 'Sprout Cafe',
    cuisine: 'Salad'
  }, {
    name: 'Pluto\'s',
    cuisine: 'Salad'
  }, {
    name: 'Junoon',
    cuisine: 'Indian'
  }, {
    name: 'Bistro Maxine',
    cuisine: 'French'
  }, {
    name: 'Three Seasons',
    cuisine: 'Vietnamese'
  }, {
    name: 'Sancho\'s Taquira',
    cuisine: 'Mexican'
  }, {
    name: 'Reposado',
    cuisine: 'Mexican'
  }, {
    name: 'Siam Royal',
    cuisine: 'Thai'
  }, {
    name: 'Krung Siam',
    cuisine: 'Thai'
  }, {
    name: 'Thaiphoon',
    cuisine: 'Thai'
  }, {
    name: 'Tamarine',
    cuisine: 'Vietnamese'
  }, {
    name: 'Joya',
    cuisine: 'Tapas'
  }, {
    name: 'Jing Jing',
    cuisine: 'Chinese'
  }, {
    name: 'Patxi\'s Pizza',
    cuisine: 'Pizza'
  }, {
    name: 'Evvia Estiatorio',
    cuisine: 'Mediterranean'
  }, {
    name: 'Gyros-Gyros',
    cuisine: 'Mediterranean'
  }, {
    name: 'Mango Caribbean Cafe',
    cuisine: 'Caribbean'
  }, {
    name: 'Coconuts Caribbean Restaurant &amp; Bar',
    cuisine: 'Caribbean'
  }, {
    name: 'Rose &amp; Crown',
    cuisine: 'English'
  }, {
    name: 'Baklava',
    cuisine: 'Mediterranean'
  }, {
    name: 'Mandarin Gourmet',
    cuisine: 'Chinese'
  }, {
    name: 'Bangkok Cuisine',
    cuisine: 'Thai'
  }, {
    name: 'Darbar Indian Cuisine',
    cuisine: 'Indian'
  }, {
    name: 'Mantra',
    cuisine: 'Indian'
  }, {
    name: 'Janta',
    cuisine: 'Indian'
  }, {
    name: 'Starbucks',
    cuisine: 'Coffee'
  }, {
    name: 'Peet\'s Coffee',
    cuisine: 'Coffee'
  }, {
    name: 'Coupa Cafe',
    cuisine: 'Coffee'
  }, {
    name: 'Lytton Coffee Company',
    cuisine: 'Coffee'
  }, {
    name: 'Il Fornaio',
    cuisine: 'Italian'
  }, {
    name: 'Lavanda',
    cuisine: 'Mediterranean'
  }, {
    name: 'MacArthur Park',
    cuisine: 'American'
  }, {
    name: 'St Michael\'s Alley',
    cuisine: 'Californian'
  }, {
    name: 'Cafe Renzo',
    cuisine: 'Italian'
  }, {
    name: 'Miyake',
    cuisine: 'Sushi'
  }, {
    name: 'Sushi Tomo',
    cuisine: 'Sushi'
  }, {
    name: 'Kanpai',
    cuisine: 'Sushi'
  }, {
    name: 'Pizza My Heart',
    cuisine: 'Pizza'
  }, {
    name: 'New York Pizza',
    cuisine: 'Pizza'
  }, {
    name: 'Loving Hut',
    cuisine: 'Vegan'
  }, {
    name: 'Garden Fresh',
    cuisine: 'Vegan'
  }, {
    name: 'Cafe Epi',
    cuisine: 'French'
  }, {
    name: 'Tai Pan',
    cuisine: 'Chinese'
  }]
});

Ext.create('Ext.container.Viewport', {
  items: Ext.create('Ext.ux.GroupComboBox', {
    fieldLabel: 'Restaurants',
    name: 'txtRestaurant',
    forceSelection: true,
    editable: false,
    queryMode: 'local',
    triggerAction: 'all',
    multiSelect: true,
    groupField: 'cuisine',
    displayField: 'name',
    valueField: 'name',
    store: Restaurants,
    width: 400
  })
}).show();
.grouped-list .x-boundlist-item {
  padding: 1px 3px 0 10px;
}
.grouped-list .group-header {
  padding: 4px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}


आपका कोड मेरे लिए काम करता है (मैक पर एफएफ 3) भले ही मैं सहमत कि रेगेक्स शायद होना चाहिए:

/\bformat_(.*?)\b/

(लेकिन, ज़ाहिर है, मुझे यकीन नहीं है क्योंकि मुझे रेगेक्स के संदर्भ को नहीं पता है।)





javascript extjs combobox grouping extjs4.2