Develop Reference

ExtJS columns renderer, row count and setLoading

I have a grid.Panel, it is hidden by default. When I show it, it renders 100 lines and performs the function renderer, but if you call refresh() for this table, it will render only 49 lines, what do these numbers depend on and how to change them? Also wondering if there is an event when the lines are rendered to cause setLoading(false)?
grid.Panel:
extend: 'Ext.grid.Panel',
alias: 'widget.commongrid',
controller: 'commongrid-controller',
viewModel: {
type: 'commongrid-model'
},
viewConfig: {
enableTextSelection: true
},
enableColumnMove: false,
columns: [],
bind: {
store: '{commonDetailStore}'
},
createGrid: function (columns, data) {
var ctrl = this.getController();
ctrl.createGrid(columns, data);
}
Controller code:
createGrid: function (columns, data) {
var me = this,
view = me.getView(),
vm = me.getViewModel(),
store = vm.getStore('commonDetailStore');
columns = me.generateColumn(columns);
view.reconfigure(columns);
store.loadData(data);
},
generateColumn: function (columns) {
return Ext.Array.map(columns, function (column, index) {
return {
'dataIndex': column,
'text': column,
'width': 150,
'sortable': false,
'resizable': true,
'menuDisabled': true,
'renderer': 'onCommonDetailedGridColumnRenderer'
};
});
}
grid.Model:
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.commongrid-model',
stores: {
commonDetailStore: {
autoLoad: true,
proxy: {
type: 'localstorage'
},
fields: []
}
}

How do I select only the filtered rows in jQgrid?

I have a grid (made with jqGrid 4.15.2). The code looks like the one below:
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$(function () {
"use strict";
var $grid = $("#list"),
maximizeGrid = function () {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
};
// Resize grid if window is being resized
$(window).on("resize", maximizeGrid);
$grid.jqGrid({
colNames: ["", "Form #", "Form", "Plan", "Class", "Drug"],
colModel: [
{name: "act", template: "actions"},
{
name: "FormId",
align: 'center',
fixed: true,
frozen: true,
resizable: false,
width: 100,
editable: "hidden"
},
{name: "FormName", search: true, stype: "text"},
{name: "PlanName", search: true, stype: "text"},
{
name: "DrugGroupName",
edittype: "select",
editable: true,
search: true,
editoptions: {
dataUrl: "/ajax/drug_groups/get_all",
buildSelect: function (data) {
var select = "<select>", i;
for (i = 0; i < data.length; i++) {
select += "<option value='" + String(data[i].Id) + "'>" + $.jgrid.htmlEncode(data[i].DrugGroupName) + "</option>"
}
return select + "</select>";
},
selectFilled: function (options) {
setTimeout(function () {
$(options.elem).select2({
width: "100%"
});
}, 0);
}
},
stype: "select", searchoptions: {
sopt: ["eq", "ne"],
generateValue: true,
noFilterText: "Any",
selectFilled: function (options) {
setTimeout(function () {
$(options.elem).select2({
width: "100%"
});
}, 0);
}
}
},
{name: "DrugName", search: true, stype: "text"}
],
cmTemplate: {
width: 300,
autoResizable: true
},
iconSet: "fontAwesome",
rowNum: 25,
guiStyle: "bootstrap",
autoResizing: {
compact: true,
resetWidthOrg: true
},
rowList: [25, 50, 100, "10000:All"],
toolbar: [true, "top"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
toppager: true,
cloneToTop: true,
hoverrows: true,
multiselect: true,
multiPageSelection: true,
rownumbers: true,
sortname: "Id",
sortorder: "desc",
loadonce: true,
autowidth: true,
autoresizeOnLoad: true,
forceClientSorting: true,
prmNames: {id: "Id"},
jsonReader: {id: "Id"},
url: '/ajax/plans_to_forms/get_all',
datatype: "json",
editurl: '/ajax/plans_to_forms/update',
formDeleting: {
url: '/ajax/plans_to_forms/delete/',
delicon: [true, "left", "fa-scissors"],
cancelicon: [true, "left", "fa-times"],
width: 320,
caption: 'Delete Plan to Form Link',
msg: 'Are you sure you want to delete this link?',
beforeShowForm: function ($form) {
var rowids = $form.find("#DelData>td").data("rowids");
$form.closest(".ui-jqdialog").position({
of: window,
my: "center center",
at: "center center"
});
if (rowids.length > 1) {
$form.find("td.delmsg").html('Are you sure you want to delete all the selected form links?');
}
},
afterComplete: function (response, postdata, formid) {
if (response.responseText === "true") {
toastr["success"]("The link was deleted successfully.", "Information");
} else {
toastr["error"]("Something went wrong, the link could not be deleted.", "Error");
}
}
},
ajaxSelectOptions: {
type: "POST",
dataType: "json"
},
navOptions: {
edit: false,
add: false,
search: false
},
inlineEditing: {
keys: true,
focusField: "DrugGroupName",
serializeSaveData: function (postData) {
var changedData = {}, prop, p = $(this).jqGrid("getGridParam"),
idname = p.keyName || p.prmNames.id,
oldValue, cm;
for (prop in postData) {
oldValue = p.savedRow[0][prop];
if (p.iColByName[prop] != null) {
cm = p.colModel[p.iColByName[prop]];
}
if (postData.hasOwnProperty(prop) && (postData[prop] !== oldValue || prop === idname)) {
changedData[prop] = postData[prop];
}
}
return changedData;
},
aftersavefunc: function () {
toastr["success"]("The record was updated successfully.", "Information");
},
errorfunc: function () {
toastr["error"]("Something went wrong, the record could not be updated.", "Error");
}
},
onSelectRow: function (rowid, status, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
p = $self.jqGrid("getGridParam"),
savedRow = p.savedRow;
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
if ($td.length > 0 && $td[0].cellIndex !== p.iColByName.act) {
// don't start editing mode on click on "act" column
$self.jqGrid("editRow", rowid);
}
},
loadComplete: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
if (p.datatype === "json") {
// recreate the toolbar because we use generateValue: true option in the toolbar
$self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
}
}
}).jqGrid('navGrid').jqGrid("filterToolbar").jqGrid('setFrozenColumns');
// fill top toolbar
$('#t_' + $.jgrid.jqID($grid[0].id)).append($("<div><label for=\"globalSearchText\">Global search in grid for: </label><input id=\"globalSearchText\" type=\"text\"></input> <button id=\"globalSearch\" type=\"button\">Search</button></div>"));
$("#globalSearchText").keypress(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key === $.ui.keyCode.ENTER) { // 13
$("#globalSearch").click();
}
});
$("#globalSearch").button({
icons: {primary: "ui-icon-search"},
text: false
}).click(function () {
var postData = $grid.jqGrid("getGridParam", "postData"),
colModel = $grid.jqGrid("getGridParam", "colModel"),
rules = [],
searchText = $("#globalSearchText").val(),
l = colModel.length,
i,
cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
postData.filters = JSON.stringify({
groupOp: "OR",
rules: rules
});
$grid.jqGrid("setGridParam", {search: true});
$grid.trigger("reloadGrid", [{page: 1, current: true}]);
return false;
});
});
When I filter something and then want to mark the filtered results for delete all of them for some reason everything gets selected even those that hasn't been filtered which is sending all the IDs to the backend and therefore I am loosing everything when deleting based on the ID.
Maybe it's an stupid option or something else but I can't find what is wrong. Here is a video I have made showing up the issue. Here is a Fiddle for play with where you can see the issue happening
Steps to reproduce the issue:
Filter the column Filename by test
Using the first checkbox mark all of them
Without un-mark anything, remove the filter
Result: everything has been selected and therefore will be posted
Any ideas? Any help?

I find the problem, which you describe, very interesting and thus I changed the default behavior of "Select All" button (checkbox) to select only currently filtered data (see the commit). The new option selectAllMode with the value "all" allows to have the old behavior.
Your demo uses the latest free jqGrid directly from GitHub and thus it should work already like you want.

YUI3 view events object do not fire events

YUI3 custom view module do not calls showPanel() function
whn the user clicks to the Y.SpHeader (view) should call showPanel event handler.
the code Does not throw any error in console it simply do not work. and not logging in console that the button is clicked.
YUI.add('sp-header-section', function(Y){
Y.SpHeader = Y.Base.create('sp-header-section', Y.View, [], {
events: {
'#sign-up': {'click': "showPanel"}
},
initializer: function(config){
this._initPanel();
},
render: function(){
new Y.SpDropdownMenu({
contentBox: "#top_menu",
descriptions: true
}).render();
},
// Private Methods
_initPanel: function(){
var okButton = this.okBotton;
var cancelButton = this.cancelButton;
this.panel = new Y.Panel({
width: 300,
centered: true,
headerContent: 'Sign Up To Recieve a Book',
bodyContent: 'CAUTION: Watch out for random panels.',
zIndex: 999,
modal: true,
});
},
showPanel: function(){
Y.log('the button is clicked');
this.panel.reder();
},
// Panel Buttons Configurations
okButton: {
value: 'ok',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
},
cancelButton: {
value: 'cancel',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
}
}, {
ATTRS:{
}
});
},'1.0', {requires: ['sp-dropdown-menu', 'panel', 'escape', 'view']});
YUI().use('sp-header-section', function(Y){
var header = new Y.SpHeader({}).render();
});

Sencha Touch Load a different View on click

This is my first attempt on Sencha Touch. So please excuse me if I am asking any silly questions.
I am trying to follow clean MVC pattern from Sencha. on Home page when user clicks I want to load AdboutView, I am not sure what is wrong in this code, but it doesn't fire "onGoToAboutMeCommand"
app.js
Ext.application({
name: "HaBoMobile",
models: ["HomeModel"],
stores: ["HomeStore"],
controllers:["HomeController"],
views: ["HomeView", "AboutView"],
launch: function () {
var homeLandingView = {
xtype: "LandingView"
};
var aboutView = {
xtype: "AboutView"
};
Ext.Viewport.add([homeLandingView, aboutView]);
}
});
HomeView.js
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
fullscreen:true,
requires: "Ext.form.FieldSet",
alias: "widget.LandingView",
config: {
//scrollable: 'vertical',
items: [
{
title: 'Harsha Bopuri',
padding: 10,
items: [
{
itemId: "aboutButton",
xtype: 'button',
text: 'About me',
handler: function () {
this.fireEvent("goToAboutMeCommand", this);
}
}
]
}
],
//Not sure when I have handler, if I still need listeners?
listeners: [
{
delegate: "#aboutButton",
event: "tap",
fn: "onAboutButtonTap"
}
]
},
onAboutButtonTap:function(){
this.fireEvent("goToAboutMeCommand", this);
},
onBackButtonTap: function () {
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
HomeController.js
Ext.define("HaBoMobile.controller.HomeController", {
extend: "Ext.app.Controller",
config: {
refs: {
homeView: "HomeView"
},
control: {
homeView: {
goToAboutMeCommand: "onGoToAboutMeCommand"
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
// Commands.
onGoToAboutMeCommand: function () {
console.log("onBackToHomeCommand");
this.showAboutMe();
},
onBackToHomeCommand: function () {
console.log("onBackToHomeCommand");
this.shoHomePage();
},
showAboutMe: function () {
Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
},
shoHomePage: function () {
Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var homeStore = Ext.getStore("HomeStore");
homeStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});

I think the problem is in your refs section of your controller,refs takes key value pair.key can be any reference and while value is used in ComponentQuery.
I would suggest to add xtype in your HomeView.js file,like below.
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
xtype: 'HomeView',
//-----

Button handler that fires goToAboutMeCommand event runs in the scope of the button but in the controller you listen to homeView so the event is never caught.
This button handler should work:
handler: function (btn) {
var hv = btn.up('homeView');
hv.fireEvent("goToAboutMeCommand", hv);
}

Ext js combo not working properly

I'm new in ExtJS and I'm trying to display a window with a combo, a cancel and an OK button but the combo does not seem to be working properly: It's not showing the label and when I click the picker (or the trigger) it does not show the list.
I need the combo to either accept free text and selected values but I don't know what I'm doing wrong. I went over Sencha api and forums but I can't work this out.
I hope you guys have a solution for this. Thanks and sorry if my English is not good enough.
function new_filter()
{
var ds_filter2 = new Ext.data.JsonStore({
url: 'forms-combobox-data-filters.php?user='+user_id,
fields: ['id', 'name'],
autoLoad: true/*,
totalProperty: "results"*/
});
var dlg = new Ext.Window(
{
title: 'Save Current Settings as a Filter',
id: 'frmFilter',
width: 350,
y: 200,
height: 120,
minWidth: 350,
minHeight: 100,
iconCls: 'save',
bodyStyle:'padding:0px 0px 0px 0px; background-color:#F5F5F5;',
modal: true,
resizable: false,
maximizable: false,
draggable:false,
closable: true,
closeAction: 'close',
hideMode: "offsets",
constrainHeader: true,
//autoLoad: { url : 'filter_form2.php', scripts: true},
keys: [
{ key: [Ext.EventObject.ENTER], handler: function() {
create_new_filter();
}
},
{ key: [Ext.EventObject.ESCAPE], handler: function() {
dlg.close();
}
}],
buttons:[
{
text : 'OK',
handler: function()
{
var selectedValue = Ext.getCmp('combo-new-filter').value; //selectedValue => Nombre
var rec = ds_filter2.getById(selectedValue); //rec => ID
//alert('rec: '+rec+'\nselected value: '+selectedValue);
if (rec == undefined ) //si el valor seleccionado no se encuentra en combo
{
create_new_filter(selectedValue);
dlg.close();
}
else
{
//alertar con el message box si se desea sobre escrbir el filtro
//ok---> grabar
//cancel--->cancelar
var selected_text = rec.get('name');
var id = rec.get('id');
//alert("selected text: "+selected_text);
Ext.MessageBox.confirm('Confirm','Are you sure you want to overwrite this filter "'+selected_text+'"?', function(btn)
{
if (btn=='yes')
{
var url = 'deleteFilter.php?filter='+id;
var mnmxmlhttp = Array ();
mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp)
{
mnmxmlhttp.open ("POST", url, true);
mnmxmlhttp.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
mnmxmlhttp.send ("");
mnmxmlhttp.onreadystatechange = function ()
{
if (mnmxmlhttp.readyState == 4)
{
create_new_filter(selected_text);
}
}
}
}
});
}
}
},
{
text : 'Cancel',
handler: function() {
dlg.close();
}
}
],
items:[
/*{
xtype: 'label',
forId: 'myFieldId',
text: 'Name of saved filter:',
},*/
{
id:'combo-new-filter',
labelAlign: 'left',
fieldLabel: 'Filter Name:',
xtype: 'combo',
store: ds_filter2,
//queryMode: 'local',
displayField:'name',
valueField: 'id',
//editable: true,
x: 110,
y: 20,
listeners: {
/*beforerender: function(combo){
combo.setValue("Select saved filter to apply");
},
select:{fn:function(combo, value) {
if (combo.getValue()>0){onSelectFilter(combo.getValue());}
}
}*/
}
}
]
});
dlg.show();
}

Your window needs to have the layout: 'form' configuration. In order to display fields, combos, etc, the layout that contains them needs to be a form one.