I have the following code for adding buttons in ever row of a DataGrid:
structure: [
{field: 'msConstId', width: '0%', name: 'Milestone',hidden: true},
{field: 'edit', width: '8%', name: 'Edit',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Edit", iconClass:"dijitIconEditTask",showLabel:true, onClick:function(){ updateMilestone.show(); populateUpdateControls(); }});
}},
{field: 'delete', width: '10%', name: 'Delete',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Delete", iconClass:"dijitIconDelete",showLabel:true, onClick:function(){ deleteMilestoneDialog(); }});
}}
]
The problem is that I want to assign an id to each of the button as "editBtnRowIndex" and "deleteBtnRowIndex". I want to use the id's for enabling and disabling buttons in specific grid rows.
Is that possible?
I had to go with a work around for this by looking at the data in other fields and disabling the button for that row with something like this:
var rowdata = grid.getItem(rowIndex);
rowIndex is passed as param to formatter function.
var val = rowdata.myRowID;
if(val=='specific value') {
//return disabled button
} else {
//return enabled button
}
Related
Using Sencha Touch ver 2.3.1a
The carousel control in PassDownEntryView
{
xtype: "container",
itemId: "pageEntryItemsContainer",
layout: "fit",
items:
[
{
xtype: "carousel",
itemId: "carouselItems",
direction: "horizontal",
items:
[
]
}
]
}
I'm creating multiple instances of a view for a carousel
var data = JSON.parse(response.responseText);
var itemViewArray = [];
var index = 0;
Ext.Array.each(data.Data, function(item)
{
var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView');
itemView.setItemId('EntryItemId' + index);
itemView.configureEntry(item);
itemViewArray.push(itemView);
index++;
});
if(itemViewArray.length > 0)
{
carouselControl.setItems(itemViewArray);
}
configureEntry sets the html in the PassDownEntryItemView
{
xtype: "label",
html: ""
}
Code that sets the label:
configureEntry: function(item)
{
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
It creates the right number of carousels but only the first instance has the label set. The rest of them are blannk. I did an output of configureEntry() and
it is properly passwing each item. Seems like im missing something when setting it. Any ideas?
Update: 6/21 - A
It seems like the problem is the instance of the view. Cause When I create a hard coded view:
var item1 =
{
item: "test1"
}
var itemView = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView.configureEntry(item1);
var item2 =
{
item: "test2"
}
var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView1.configureEntry(item2);
carouselControl.setItems([itemView, itemView1]);
I still get the result that only "Test2" shows even though there are two carousel panels showing up. Except the second one is blank
Update 6/22
Ive added my PassDownEntryItemView code below:
Ext.define('MCConnect.view.PassDown.PassDownEntryItemView',
{
extend: 'Ext.form.Panel',
xtype: 'passdownEntryItemView',
requires:
[
'Ext.data.Store',
"Ext.field.Text",
"MCConnect.view.Commons.AutoHeightTextArea"
],
config:
{
itemId: '',
isReadOnly: true,
passDownEntryItemId: 0,
layout: "vbox",
items:
[
{
xtype: 'fieldset',
style: 'padding: 0; margin: 1px;',
items:
[
{
xtype: "label",
html: ""
}
]
}
],
listeners:
[
]
},
initialize: function()
{
},
configureEntry: function(item)
{
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
});
6/22
Thanks to Akatum suggestion. I figured it out. I labeled the itemId of the label as #labelDistrictItem-0 so in my configureEntry() i searched for it then set it and renamed the itemId:
var fieldLabel = Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0];
fieldLabel.setItemId('labelDistrictItem-' + item.id);
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
and it works now
Problem is in your configureEntry function. var fieldLabel = Ext.ComponentQuery.query('label')[0]; will always returns first label component in your whole application. So in your case it will always returns label which is in your first carousel panel.
Instead of using Ext.ComponentQuery.query('label')[0]; you should look for specific label in specific MCConnect.view.PassDown.PassDownEntryItemView by using up() or down() methods (depends on layout of your application).
Edit
You can get your label component by looking for it only in child components of your PassDownEntryItemView. For this you can use down() method. So your configureEntry method should look like this:
configureEntry: function(item) {
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = this.down('label');
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
Fiddle with working example: https://fiddle.sencha.com/#fiddle/6t4
I am trying to extend a tinymce pluggin and need to add an input element of type=file.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
It seems you can do the following to show elements to a container that opens in a panel :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];
win = editor.windowManager.open({
title: 'Insert/edit image',
data: data,
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: generalFormItems
},
],
onSubmit: onSubmitForm });
I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
---> {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},
];
Is it possible to do this and how?
Managed to figure this out and want to leave the answer here for others trying to do something similar.
There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :
{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},
In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Insert/edit image',
url: 'dialogTemplate.html',
width: 700,
height: 600
});
Also you can inline HTML:
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Upload a file to attach',
html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
width: 450,
height: 80,
buttons: [{
text: 'Attach',
subtype: 'primary',
onclick: function() {
// TODO: handle primary btn click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});
Please let me know, how to add checkbox column in a grid.
I tried the following. But its read only checkbox.
Should I use checkboxModel? if so, then please let me have the complete code
Here you go, an Ext4 example matching any data element:
{
xtype: 'checkcolumn',
header: 'My Checkbox column',
dataIndex: 'myBooleanFieldThatMatchesTheModelFieldOfMyGridStore',
listeners: {// In case you want to perform a specific action on click...
checkChange: me.onCheckChange
},
flex: 1
}
Here is an example of a grid with a checkbox.
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: //
selModel: sm,
columns: //[]
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection',
renderTo: Ext.getBody()
});
I have a list and I want have two icons per line using onItemDisclosure. How can I do that?
I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help you.
bye.
You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:
{
xtype: 'list',
onItemDisclosure: true,
cls: 'my-list-cls',
itemTpl: [
'<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'
]
}
Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.
Then, in your app.scss, add:
.my-list-cls {
.x-list.check-mark.x-list-disclosure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '3';
font-family: 'Pictos';
color: #fff;
text-align: center;
text-shadow: 0 0 0;
}
}
This controls the styling for your new disclosure icon.
By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).
The result:
It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.
I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>
You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}