Develop Reference

How to remove sort from specific column in ui grid?

I have following code which is working fine for not having filters. Also able to set width even if it is a resizable grid. But sort is the only problem. Not able to remove the sort option from Edit column data. sortable: false is not working in my code. I can still the sort icon of arrow present in the row Header.
You can find the same in the screenshot. How to get rid off this?
let colDefs = [];
let editCol = {
name: 'test',
displayName: 'Edit',
cellTemplate: '<span class="glyphicons glyphicon-pencil edit-app-host"></span>',
width: '75',
enableFiltering: false,
sortable: false,
enableColumnMenu: false
};

You should use enableSorting: false on the column you don't want to be sortable and use enableColumnMenu: false on a column if you want to hide the menu arrow.
Example PLUNKER:
http://plnkr.co/edit/0FE4JSzVxPjduYQTA3ts?p=preview

Arrow was hidden with the help of css:
span i.ui-grid-icon-up-dir:first-child{
display:none;
}

How to get the items object without the tabs in a TabPanel?

I would like to loop through items of a TabPanel without the Tabs (which are not defined in the class, but are added by the framework dynamically).
here is the relevant code :
Ext.define('MyTabPanel', {
extend: 'Ext.tab.Panel',
config:{
height: '50px',
autoDestroy : true,
items: [
{
xtype: 'item',
},{
xtype: 'item',
}
]
}
});
When I loop through the items with the each function, it also loops through the tabs :
ext-item-1
ext-tabbar-1
ext-item-2
ext-item-3
ext-tabbar-2
ext-item-4
Is there a function to omit these hidden sneaky tabs ?
Thanks !

Try using the getInnerItems method to receive only items which are not docked to the tabpanel or floating.
var items = tabPanel.getInnerItems();
Also see this fiddle

Load new panel.Panel when click on items in tree.Panel

I'm new in ExtJS
I need load new panel every time when I click on item in tree.Panel
Here is my code creating new panel (by default)
var contentPanel = Ext.create('Ext.panel.Panel', {
id: 'content-panel',
region: 'center',
layout: 'card',
activeItem: 0,
border: false,
items: [dict_modules['profiles-area']]
});
This code for creating tree.Panel
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
store: store,
height: '100%',
rootVisible: false
});
this is my click handler for tree.Panel
treePanel.getSelectionModel().on('select', function(selModel, record){
if (record.get('leaf')) {
contentPanel.removeAll(true);
contentPanel.add([dict_modules[record.data.id + '-area']]);
contentPanel.doLayout();
}
});
When my app is loaded, it looks like this
Once I click on the "specialty" it looks like this (all right(!!!))
BUT(!!!), once I click on "Profiles", it looks like this (WHY????)
On top of "content-panel" you can see some line
And if I again click on "Specialty", it looks like this (WHY???)
There are no lines at the top! Why??? What I'm do incorrect?

This code solved problem
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-area');
}
});

items not loading in sencha touch 2

i have a sencha touch application that uses a tabpanel, a beta version of this application loads all items of the tabpanel and displays it.
with so many items, switching between tabs became slower
for optimization my idea is to load items only when a certain panel is activated after showing a loading mask.
i was able to make it work on first click but when i switch to the same tab another time it's not being filled or at least items are not being showed.
no exceptions are thrown.
Ext.application({
name : 'Sencha',
launch : function() {
var root = contents;
var children = root._listOfContentChild;
var mainPanel = Ext.create('components.NavigationPanel',
{
iconCls : 'more',
listeners: {
activate: function() {
mainPanel .setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
setTimeout(function() {
loadItems(root,children); // returns my items
mainPanel .setItems(items);
mainPanel .setMasked(false);
}, 300);
} } });
var settingsPanel = Ext.create('components.NavigationPanel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
overview:
my application is working correctly if all items are filled at the beginning before pressing on tabs
my problem is when i have a huge number of items and i press on their corresponding tab. it hangs for 1,2 secs.
a person using this application will think that he didn't press correctly on the tab and it will look so slow.
my approach is to load a mask on tab press just for 1 sec, this will make my tab respond automatically when pressed, then i add my items. this idea worked only for the first click, when i switch to another tab and back to the original nothing is being showed (except for the loading mask)
i tried mainPanel.add instead of mainPanel.setItems. i faced another problem, now in the next tap on the panel,my items are shown but without the loading mask as if i'm loading the items at the beginning before pressing.

I figured out the solution. Check the below code.
Hope that helps you!
Code :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Sencha',
launch: function() {
//var root = contents;
//var children = root._listOfContentChild;
var mainPanel = Ext.create('Ext.Panel', {
iconCls : 'more',
id:'mpanel',
styleHtmlContent:true,
listeners: {
painted: function() {
mainPanel.removeAll();
mainPanel.add({
masked:{
xtype:'loadmask',
id:'lmask',
}
});
setTimeout(function() {
Ext.getCmp('lmask').hide();
Ext.getCmp('mpanel').add({ xtype:'textfield',label:'Name',required:true });
}, 300);
}
}
});
var settingsPanel = Ext.create('Ext.Panel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
Sample output :

How do I create a Single Select checkbox list using Ext.ListView component?

I'm trying to create a checkbox list using ListView component. Below is my code.
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'blank.gif';
var genres = new Ext.data.SimpleStore({
fields: ['id','genre'],
data: [['1','Comedy'],['4','Drama'],['3','Action']]
});
var list1 = new Ext.list.ListView({
store: genres,
width: 120,
hideHeaders: true,
selectedClass: 'x-list-selected',
multiSelect: false,
singleSelect: true,
columns: [{dataIndex:'id',tpl:'<input type="checkbox" id="{id}"></input>',width:.2},{dataIndex:'genre',tpl:'{genre}',width:.5}]
});
var myPanel = new Ext.Panel({
renderTo: Ext.get('div_formPanel'),
layout: 'hbox',
autoWidth: true,
autoHeight: true,
id: 'myP',
autoScroll: true,
items:[list1]
});
});
</script>
As you can see I have checkboxes in my ListView, which is set to SingleSelect mode. The problem is when in singleSelect, the checkbox does not maintain state. Basically I'm clicking the checkbox but it does not check. However when I tried swapping the checkbox with radio buttons, the radio buttons do fill in upon clicking. Can someone please point out what I'm doing wrong or how can I achieve the desired effect.
Thank you

I think you may want to use an Ext.grid.GridPanel with Ext.grid.CheckboxSelectionModel, instead of putting your Ext.list.ListView inside of an Ext.Panel and making checkboxes with a template.
Here's an example: Sencha Grid Plugins Examples
You can also configure your Ext.grid.CheckboxSelectionModel with singleSelect:true to get your desired effect.