I have a grid with 3 column, and one of those column has an actioncolumn, with a button on it;
My scenario; If the user comes from clicking on a button of the friend view then i need to show the following grid (with the actioncolumn button), but when the user comes from clicking on the teacher view, then i need to have 2 buttons displayed in the action column. How can i do that ?
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('friendStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});
You can always create two actioncolumns, one with one button and the other with two buttons, and hide the one that you don't need.
...
xtype : 'actioncolumn',
hide : this.fromTeacherView, //a boolean
...
the fromTeacherView is in this case a boolean that is a config parameter given to the grid when it is instantiated.
Not sure if this is what you are looking for.
Related
I have a tabpanel in my view with only one tab in it. Later when other data is loaded I add those tabs to this tabpanel but that way tabs are rendered in the order I have added. I want to show new tabs before existing tab but it always append tab after it, is there a way to do something like addBefore using which I can control position of tabs?
Here is my tabpanel:
{
xtype : 'tabpanel',
flex : 1,
id : 'featurePanel',
tabBarPosition : 'top',
height : '100%',
ui : 'maintabbar',
tabBar : {
layout : {
pack : 'center'
}
},
items : [{
title : 'Tab 1',
items : [{
xtype : 'panel',
id : 'tab1Id'
}]
}]
}
Here is how I am adding new panels:
var featureList = Ext.create('MyTabApp.view.FeaturedList', {
id : "tab2Id"
});
var featurePanel = Ext.getCmp("featurePanel");
featurePanel.add({
title : 'Tab 2',
items : [{
xtype : 'panel',
items : [featureList]
}]
});
I want this new tab(Tab 2) to appear before 'tab 1'.
tabpanel's add method will always add new tab at the end. So if you want to add new tab at some different position, you have to use insert method. With this method you can set the position for new tab being added.
With your code it can be like -
var featureList = Ext.create('MyTabApp.view.FeaturedList', {
id : "tab2Id"
});
var featurePanel = Ext.getCmp("featurePanel");
featurePanel.insert(0,{
title : 'Tab 2',
items : [{
xtype : 'panel',
items : [featureList]
}]
});
This will add new tab at first position. If you are adding more than one tab, you can set counter and add new tabs accordingly.
How to add check box Dynamically in form Panel. I need to store check box value and label in json data. If i enter the value in textbox and then click the add button to create check box dynamically from json label and value.
This is my checkbox script:
xtype: 'fieldset',
items: [
{
xtype: 'checkboxfield',
name : 'tomato',
label: '{hardware}',
value: '{tomato}',
}
]
You will need to get access to your fieldset by either saving a reference to it when you create it:
var fieldset = Ext.create({
items: [...]
});
..or by giving it an id and using that to reference it:
{
xtype: 'fieldset',
id: 'myfieldset',
items: [...]
}
...
var fieldset = Ext.getCmp('myfieldset');
Then you can dynamically insert a new checkbox using the add method on the fieldset:
var myData = {
label: 'my label which i got via JSON',
value: 1
};
fieldset.add({
xtype: 'checkboxfield',
name: 'tomato',
label: myData.label,
value: myData.value
});
I want the close button to be reusable so I created its own class so I can attach it to the views that need it. I want to just be able to pass the view that is attached to the view to the controller to close that view. It should be fairly simple and I would suspect that this is how many do it but I can't get it to work correctly. I get it to close the view but get the error
Uncaught TypeError: Cannot read property 'dom' of null
I understand this to generally mean that the view isn't being destroyed but I thought this told it to destroy the view:
Ext.Viewport.remove(curView, true);
Here is what I believe to be the pertinent code
Controller:
closeView: function(btn, e,opts){
var curView = btn.getParent().getParent();
console.log('From btn: ' + curView + ',' + opts);
Ext.Viewport.remove(curView, true);}
View:
Ext.define('SenchaFirstApp.view.DetailView',{
extend: 'Ext.tab.Panel',
requires: ['Ext.Toolbar', 'Ext.tab.Panel', 'Ext.form.FieldSet', 'Ext.field.Select'],
model: ['SenchaFirstApp.model.Details', 'SenchaFirstApp.model.SiteInfo'],
alias: 'widget.detailview',
// xtype: 'tabpanel',
config:
{
scrollable: true,
width: 1500,
height: 800,
// fullscreen: true,
layout: {type: 'card', animation:{type: 'flip'}},
centered: true,
border: 10,
tabBar: {
docked: 'top',
},
formParams: {
},
items:
[
{
//Tab bar
xtype: 'tbar',
title: 'Details View',
items: [
{
xtype: 'closebtn',
id: 'detailsBtn',
sourceForm: this
}]
},
{
title: 'Equipment Monitor', //first tab
xtype: 'monitor',
},
{
title: 'Site Information', //second tab
xtype: 'siteinfo',
}
]
} //End Config
I tried to use
Ext.Viewport.remove(Ext.Viewport.getActiveItem, true)
but that also didn't work. I suspect that has to do with how I created that view maybe. I'm new to Sencha so there could be many things I'm doing wrong so I appreciate the help.
I forgot to mention that, after closing the tab panel, I can't open it again without refreshing which again I'm sure is due to the view not being destroyed
It appears that the problem was using id's. I thought that I took them out but I guess not. I took the id's out and used alias's and got it working. I'm still not figuring out how to pass the view attached to the button but now
Ext.Viewport.remove(Ext.Viewport.getActiveItem, true)
is working. The true property tells it to destroy the view after removing it.
My application (mvc) is designed as such with 3 tabs in my view
Ext.define('App.view.cube.MainView', {
extend: 'Ext.panel.Panel',
....
layout: 'card',
...
dockedItems: [{
xtype: 'panel',
items: [{
// a drop down containing 2 choices
}]
}],
items: [{
xtype: 'tabpanel',
itemId: 'mmtabs',
activeTab: 1,
items: [{
title: 'Served',
xtype: 'treepanel', // my own xtype extending this xtype
id: 'Served :',
itemId: '1'
}, {
title: 'UnServed',
xtype: 'treepanel', // my own xtype extending this xtype
id: 'UnServed :',
itemId: '0'
}, {
title: 'Total',
xtype: 'treepanel', // my own xtype extending this xtype
id: 'Total :',
itemId: '2'
}]
}]
});
Basically a drop down with two choices should allow the user to view the required columns within the grid (treepanel). The very first time the app is loaded and the user changes to a different choice in the dropdown the columns do not hide as they should. But if he were to navigate to another tab and then do the same thing everything works as it is supposed to. I cannot figure out the problem.
In the code above i am reusing
xtype : 'treepanel', // my own xtype extending this xtype
across the three tabs by having different itemIds ( i hope this is fine ).
In my controller i have a function to toggle to the view (hide/show specific columns)
initialview (iterate over all columns in all tabs and set the appropriate view)
changeview invoked on the combobox within my view.
toggleView: function (cubemwwar, viewId) {
if ("2" == viewId) {
cubemwwar.columns[1].setVisible(false);
cubemwwar.columns[2].setVisible(false);
cubemwwar.columns[3].setVisible(false);
cubemwwar.columns[4].setVisible(true);
cubemwwar.columns[5].setVisible(true);
cubemwwar.columns[6].setVisible(true);
}
if ("1" == viewId) {
cubemwwar.columns[1].setVisible(true);
cubemwwar.columns[2].setVisible(true);
cubemwwar.columns[3].setVisible(true);
cubemwwar.columns[4].setVisible(false);
cubemwwar.columns[5].setVisible(false);
cubemwwar.columns[6].setVisible(false);
}
}, // on controller's onlaunch
initialView: function () {
var numTabs = this.getCubeMainView().query('#mmtabs')[0].items.length;
for (var i = 0; i < numTabs; i++) {
var tab = this.getCubeMainView().query('#mmtabs')[0].items.items[i];
this.toggleView(tab, 1);
}
},
// change views based on user selection
// from the combobox's select event
changeView: function (combo, rec, idx) {
// first time somehow the columns do not hide
// hide/show appropriate columns
// rec[0].data.id .. .possible values 1 and 2 only.
this.toggleView(this.getCubeMainView().query('#mmtabs')[0].getActiveTab(), rec[0].data.id);
},
On startup I iterated over all the tabs set them to active then set the first one back to active. That had solved this problem.
for(var i=0;i<numTabs ; i++)
{
var tab = tabPanel.items.items[i];
this.toggleView(tab,1);
tabPanel.setActiveTab(i);
}
tabPanel.setActiveTab(0);
this.startingup = false;
I am new to Extjs. I am facing this problem when I am trying to use combobox with a store that is populated through an AJAX call. I want the combobox to display the item that starts with the character typed in the combo box but the combobox is always showing the 1st item in the list.Here is my code,
Ext.define('fieldModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'name'
},{
name : 'value'
}]
});
{
xtype: 'combobox',
id: 'startField',
name: 'startField',
style: 'margin-right:10px;',
width: 230,
fieldLabel: 'Field',
labelAlign: 'top',
displayField: 'name',
valueField: 'value',
triggerAction:'query',
minChars:2,
//forceSelection:true,
//enableKeyEvents:true,
minListWidth:150,
//allowBlank:false,
queryMode: 'remote',
typeAhead: true,
//hideTrigger: true,
store:new Ext.data.JsonStore({
model: 'fieldModel',
//autoLoad: true,
//sortOnLoad : true,
//sortRoot: 'data',
proxy : {
type : 'ajax',
url: requesturl + '?action=getDate&itemid='+ preItemId,
reader : {
type : 'json',
root : 'data',
}
},
listeners :{
load : function( store, records, successful, operation, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}
}),
Please help.
Thanks in advance.
change your listener to keypress or keyup event
keypress( Ext.form.field.Text this, Ext.EventObject e, Object eOpts )
This event only fires if enableKeyEvents is set to true.
listeners :{
keypress : function( text, event, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}